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

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

如何清除formy材料中的文本字段ui React

3 个答案: