如何清除formsy中的文本字段material 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 : ''});

但是文本字段没有被清除。如何清除它。请帮助。

Answer 1

因此，如果您使用受控输入（可能直接使用 Material-ui 中的 TextField）- 您的代码是正确的，但是 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

尝试在设置状态后重置字段：

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 文件中有 class 然后使用

this.formRef.current.reset();

如果没有class则使用

formRef.current.reset();

如何清除formsy中的文本字段material ui React

How to clear the text field in formsy material ui React

reactjs

material-ui

formsy-material-ui

formsy-react