Antd中清空Form表单输入框

东明兄 2020-05-01
0条评论 3,874 次浏览
东明兄 2020-05-010条评论 3,874 次浏览

使用resetFields可清空表单,用法:

this.props.form.resetFields();

1.如果 Form.Item 没有initValue的情况下,直接使用resetFields可以清空文本框的值

2.如果 Form.Item 是有initValue的情况下,直接使用resetFields方法会直接重置为initValue的值。

如果 Form.Item 中的值 是与 state中的值做了双向绑定,例如:

  const { productName } = this.state;
 <Form.Item label="产品名称">
                    {getFieldDecorator('productName', {
                      initialValue: productName,
                      rules: [
                        {
                          message: '产品名称',
                        },
                      ],
                    })(
                      <Input
                        type="text"
                        placeholder="产品名称"
                        className="PDCMS-input-middle"
                        onChange={e => {
                          this.setState({ productName: e.target.value });
                        }}
                      ></Input>,
                    )}
                  </Form.Item>

这里 state 中的 productName 与表单是双向绑定的,此时使用this.props.form.resetFields() 是没有效果的,因为他的 initialValue 就是来自state,输入框是什么 state中的productName就是什么,使用resetFields方法会直接重置为initialValue的值,也就没有变化。

这里就可以使用 setFieldsValue 手动清空;
代码:

     const { setFieldsValue } = this.props.form;
     setFieldsValue({ productStatus: '', productName: '' });

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注