event.preventDefault未在React中工作

Question

我按照教程&他們使用event.preventDefault()上的Save按鈕&保存表格到狀態。我還沒有真正寫過input標籤，但到目前爲止我已經添加了保存按鈕，它有點像重新加載它不應該做的頁面。

這是我的頁面組件：

class manageLocationPage extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     this.state = { 

     }; 
     this.SaveLocation = this.SaveLocation.bind(this); 
    } 

    componentWillMount() { 

    } 

    componentDidMount() { 

    } 

    SaveLocation(event) { 
     event.preventDefault(); 
     console.log("Saved"); 
    } 

    render() { 
     return (
      <div> 
       <LocationForm listingData={this.props.listingData} onSave={this.SaveLocation}/> 
      </div> 
     ); 
    } 
} 

我locationForm組件：

const LocationForm = ({listingData, onSave, loading, errors}) => { 
    return (
     <form> 
      <h1>Add/Edit Location</h1> 
      <TextInput /> 

     {/*Here below is where we submit out input data*/} 
      <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave" onClick={onSave}/> 
     </form> 
    ); 
}; 

我錯過了什麼？

Answer 1

相反，它的onClick你input.submit的，你應該做的

const LocationForm = ({listingData, onSave, loading, errors}) => { 
    return (
     <form onSubmit={onSave}> 
      <h1>Add/Edit Location</h1> 
      <TextInput /> 

     {/*Here below is where we submit out input data*/} 
      <input type="submit" disabled={loading} value={loading ? 'Saving...' : 'Save'} className="buttonSave"/> 
     </form> 
    ); 
}; 

因此事件是被阻止表單提交。

https://facebook.github.io/react/docs/tutorial.html#submitting-the-form