Как очистить текстовое поле в formsy материале ui React

Question

Привет Я использую React 14 и записываю его в ES6. Я использую formsy-material-ui для проверки формы. Существует сценарий, когда я хочу очистить значение текстового поля нажатием кнопки.

Я попытался следующий код

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

А нажатием кнопки, я выполнив следующую строку кода

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

Но текстовое поле не получает очищается. Как очистить его. Помощь Pls.

Answer 1

Итак, если вы использовали управляемый вход (возможно, используя непосредственно TextField от Material-ui) - ваш код будет прав, однако компонент FormsyText обрабатывает его значение внутри.
Если вы передадите value или defaultValue, он будет использоваться только при его рендеринге, вы можете проверить его here.

Я вижу только один способ очистить значение сейчас, в императивном стиле.

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

Примечание: Я предлагаю вам изменить способ вы используете ref. Использование refs со строкой является устаревшим и, вероятно, будет удалено в будущем. Вместо этого вы должны передать функцию, которая получит этот компонент. 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()