Antd V4版本中Form resetFields无效的原因和解决办法

2023-09-02 02:22:46

表单重置问题概述

在 Antd V4版本中，Form组件提供了resetFields方法，用于重置表单中的所有表单项。然而，在某些情况下，resetFields方法可能无效，导致表单项无法正确重置。

问题原因

导致resetFields方法无效的原因可能有多种，其中一个常见原因是表单项的initialValue属性未正确设置。initialValue属性用于设置表单项的初始值，如果initialValue属性未设置或设置不正确，那么resetFields方法将无法正确重置表单项。

解决办法

为了解决resetFields方法无效的问题，您需要确保表单项的initialValue属性正确设置。您可以通过以下步骤来设置initialValue属性：

在组件的state中定义一个对象，用于存储表单项的初始值。
在组件的componentDidMount生命周期函数中，将state中的初始值对象传递给Form组件的initialValues属性。
在需要重置表单时，调用Form组件的resetFields方法。

代码示例

import { Form } from 'antd';

class MyComponent extends React.Component {
  state = {
    initialValues: {
      name: 'John Doe',
      age: 20,
    },
  };

  componentDidMount() {
    this.props.form.setFieldsValue(this.state.initialValues);
  }

  resetForm = () => {
    this.props.form.resetFields();
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form>
        <Form.Item label="Name">
          {getFieldDecorator('name')(<Input />)}
        </Form.Item>
        <Form.Item label="Age">
          {getFieldDecorator('age')(<Input />)}
        </Form.Item>
        <Button type="primary" onClick={this.resetForm}>Reset</Button>
      </Form>
    );
  }
}

export default Form.create()(MyComponent);

在上面的代码示例中，我们在组件的state中定义了一个initialValues对象，用于存储表单项的初始值。然后，我们在组件的componentDidMount生命周期函数中，将initialValues对象传递给Form组件的initialValues属性。最后，我们在需要重置表单时，调用Form组件的resetFields方法。