フォーム素材のテキストフィールドをクリアする方法Rey

Question

こんにちは私はReact 14を使用していて、ES6に書きました。 formy-material-uiをフォームの検証に使用しています。ボタンをクリックしてテキストフィールドの値をクリアするシナリオがあります。

私は次のコード

<FormsyText 
    name="email" 
    ref="email" 
    validations="isEmail" 
    validationError="Invalid Email" 
    hintText="Email" 
    value={this.state.emailValue} 
/> 

、ボタンのクリックでを試してみました、私はコード

this.setState({emailValue : ''}); 

の次の行を実行していますが、テキストフィールドがクリア取得されていません。 これをクリアする方法。 Plsヘルプ。

Answer 1

制御された入力を使用している場合（おそらくMaterial-uiからTextFieldを直接使用している場合）、コードは正しくなりますが、FormsyTextコンポーネントは内部的にその値を処理します。
valueまたはdefaultValueをレンダリングするときにのみ使用されます。hereを確認できます。

ここでは、値をクリアする方法が1つだけ表示されます。

this.refs.email.setState({ value: "" }) 

注：私はあなたがrefを使用している方法を変更することをお勧めします。文字列でのrefの使用は推奨されなくなり、将来は削除される可能性があります。代わりに、そのコンポーネントを受け取る関数を渡す必要があります。 https://facebook.github.io/react/docs/more-about-refs.html
例：

<FormsyText 
    name="email" 
    ref={(node) => this._emailText = node} 
    validations="isEmail" 
    validationError="Invalid Email" 
    hintText="Email" 
    value={this.state.emailValue} 
/> 
//And to clear it 
this._emailText.setState({ value: "" }) 

Answer 2

SETSTATE後にリセットフィールドを試してみてください：

this.setState({emailValue : ''}); 
this.refs.email.reset() 

また、あなたはすべてのフォームをリセットすることができます。

this.refs.form.reset()