event.preventDefault가 작동하지 않습니다.

Question

& 버튼에 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> 
    ); 
}; 

내가 뭔가를 놓친 건가? 대신 온 클릭 그것은 당신의 input.submit의

Answer 1

, 당신은

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