reactjs - 如何清除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 : ''});

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

Answer 1

因此，如果您使用的是受控输入（可能直接使用TextField来自 Material-ui 的） - 您的代码是正确的，但是FormsyText组件会在内部处理它的值。
如果你传递了 avalue或者defaultValue它只会在渲染时使用，你可以在这里检查它。

我现在只看到一种清除价值的方法，以命令式的方式。

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()

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();