ReactJS：値を処理した後の空の入力フィールド

Question

コンテンツがDBに格納された後、反応コンポーネントの入力フィールドを空にする必要があります。これは私がこれまでにやったことです：

addPost (event) { 
    const content = event.target.value 

    methodInsert.call(
    { content }, 
    (error) => { 
     if (!error) { 
     event.target.value = '' 
     } 
    } 
) 
} 

<Input 
    onBlur={this.addPost.bind(this)} 
/> 

私はエラーに

Warning: This synthetic event is reused for performance reasons. 
If you're seeing this, you're accessing the property `target` on a released/nullified synthetic event. This is set to null. 
If you must keep the original synthetic event around, use event.persist(). 

Answer 1

を取得しています）（レンダリングあなたの入力にonChangeハンドラが必要になりますそのアップデート何かが変化したときのコンポーネントの状態。また、提出ロジックを処理し、this.setStateを使用して入力をクリアして値を空にするには、onSubmitハンドラが必要です。

ReactのドキュメントのControlled Componentsについてお読みください。

class Example extends React.PureComponent { 
    constructor(props) { 
     super(props); 

     this.state = { 
      inputValue = "" 
     } 

     this.handleChange = this.handleChange.bind(this); 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(e) { 
     this.setState({ 
      inputValue: e.target.value 
     }); 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 
     // .. do your stuff and then 
     this.setState({ 
      inputValue: "" 
     }); 
    } 

    render() { 
     <form onSubmit={ this.handleSubmit }> 
      <input type="text" 
        placeholder="Controlled input" 
        onChange={ this.handleChange } 
        value={ this.state.inputValue } /> 
      <button>Submit</button> 
     </form> 
    } 
}