Antd中设置 Form 初始值和清空Form表单输入框（转）

转自：Antd中清空Form表单输入框

设置 Form 初始值

法一：在 <Form.Item> 使用 defaultValue 设置默认值(一般没用)

法二：在

组件的 initValue 中设置初始值，但是注意每个字段的初始值必须是常量，不能是 state 状态

法三：通过 useEffect() 在页面渲染前设置 form 表单项的值

比如

useEffect(() => () => {
    form.setFieldValue('type', '1'); // 设置表单项 type 的初始值
  });

清空 Form 表单输入框

法一：使用 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

使用 setFieldsValue 手动清空；案例代码：

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

转自：Antd中清空Form表单输入框