event.preventDefaultは反応しません

Question

私はチュートリアル&に従っています。彼らはSaveボタンevent.preventDefault()のボタン&を状態に保存しました。私は実際に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> 
    ); 
}; 

を行う必要がありますので、イベントが防止されているフォームの送信です。あなたは `form`の` onSubmit`代わりを使用する場合、どのよう

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