Antd中清空Form表单输入框

chat

使用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: '' });

版权声明:
作者:东明兄
链接:https://blog.crazyming.com/note/2277/
来源:CrazyMing
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
海报
Antd中清空Form表单输入框
使用resetFields可清空表单,用法: this.props.form.resetFields(); 1.如果 Form.Item 没有initValue的情况下,直接使用resetFields可以清空文本框的值 2.如……
<<上一篇
下一篇>>
chat