event.preventDefault funktioniert nicht in React

Question

Ich habe ein Tutorial & folgen sie verwendet event.preventDefault() auf der Save Schaltfläche & speichern Sie ein Formular in den Zustand. Ich habe die Tags input noch nicht wirklich geschrieben, aber bis jetzt habe ich die Schaltfläche Speichern hinzugefügt und es lädt die Seite irgendwie neu, die es nicht tun sollte.

Hier ist meine Seite Komponente:

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> 
     ); 
    } 
} 

Meine locationForm Komponente:

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> 
    ); 
}; 

Habe ich etwas verpasst?

Answer 1

Statt onClick es Ihre input.submit, sollten Sie tun

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> 
    ); 
}; 

So ist die Veranstaltung die Formulareinreichung ist, die verhindert wird.

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