フォームを送信する際に入力をクリアできません

Question

私はreduxsとredux-formを併用しています。

もセマンティックUIを使用して、ライブラリ

私は自分のフォームを送信したい場合は、私は私のページをリフレッシュする必要はありませんが反応します。代わりに、投稿後に私のフォームをリセットしたい。

残念ながら、値を無効にするように状態を設定している間は、入力をクリアできません。

/** Form component **/ 
 

 
<Form onSubmit={handleSubmit(this.handleSubmitAction)}> 
 
     <Field name="input" component={renderTitleInput} onChangeAction={this.handleInputChange} defaultValue={this.state.input} /> 
 
      <input type="submit" name="submit" /> 
 
     </Form> 
 
     
 
     
 
     
 
/** HandleSubmit function **/ 
 

 
handleSubmitAction = (e) => { 
 
    this.setState({input:''}) 
 
}

フィールドは、フォームを送信した後に充填されたまま。

提案がありますか？ありがとう

Answer 1

あなたが作成したものは制御されていないコンポーネントです。つまり、更新はDOMを介して処理する必要があります。これを行うには、ref属性を追加して、フォーム送信コールバックのDOM要素にアクセスする必要があります。ここにあなたが必要とする変更があります。

<Form onSubmit={handleSubmit(this.handleSubmitAction)}> 
    <Field name="input" component={renderTitleInput} onChangeAction={this.handleInputChange} defaultValue={this.state.input} ref={(input) => this.input = input} /> 
     <input type="submit" name="submit" /> 
</Form> 
/** HandleSubmit function **/ 

handleSubmitAction = (e) => { 
    // This can be used when using controlled component. 
    //this.setState({input:''}) 
    this.input.val = ''; 
} 

しかし、おそらくあなたが望むのは、controlled componentとして扱うことです。