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

Question

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

Я пробовал следующий код

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

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

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

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

Answer 1

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

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

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

Примечание: я предлагаю вам изменить способ использования 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()

Answer 3

const formRefdeposit = useRef(null);

<Formsy
        onValidSubmit={handleSubmit}
        onValid={enableButton}
        onInvalid={disableButton}
        ref={formRef}
 >
....Form Fields
</Formsy>

если у вас есть класс в вашем js файле, используйте

this.formRef.current.reset(); 

если без класса, используйте

formRef.current.reset();