赋能生产力 —— Ant Design 组件库中的表单（二）

2023-09-17 16:52:10

Form.create：Ant Design 表单组件的进阶指南

数据绑定：让组件与表单无缝交互

在 Ant Design 的 Form 组件中，Form.create 高阶组件扮演着至关重要的角色。它允许我们将组件与表单进行连接，实现数据的双向绑定。通过使用 getFieldDecorator 函数，我们可以将组件中的字段与表单字段进行关联，这样当表单发生变化时，组件中的数据也会随之更新，反之亦然。

const WrappedDemo = Form.create()(Demo);

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props;
    return (
      <Form>
        <FormItem label="姓名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名!' }],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
      </Form>
    );
  }
}

表单验证：确保数据有效准确

表单验证是构建任何表单应用的关键功能。Ant Design 为我们提供了强大的验证规则，允许我们对表单数据进行全面检查。这些规则包括必填验证、模式匹配、范围限定等。通过设置适当的验证规则，我们可以确保用户输入的数据符合我们的要求。

const WrappedDemo = Form.create()(Demo);

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props;
    return (
      <Form>
        <FormItem label="姓名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名!' }],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
      </Form>
    );
  }
}

表单提交：将数据发送到服务器

表单提交是表单应用中至关重要的功能。Ant Design 提供了便捷的 submit 方法，允许我们将表单数据提交到服务器。此方法接受一个回调函数，该回调函数将在提交成功后被调用。在回调函数中，我们可以处理服务器响应并执行后续操作。

const WrappedDemo = Form.create()(Demo);

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="姓名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名!' }],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form>
    );
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('提交成功', values);
      }
    });
  }
}

表单重置：恢复表单到初始状态

有时，我们需要将表单重置到其初始状态。Ant Design 为我们提供了 resetFields 方法，该方法允许我们轻松清除表单中的所有数据。当用户需要重新开始或填写新的表单时，此功能非常有用。

const WrappedDemo = Form.create()(Demo);

class Demo extends React.Component {
  render() {
    const { getFieldDecorator } = this.props;
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem label="姓名">
          {getFieldDecorator('name', {
            rules: [{ required: true, message: '请输入姓名!' }],
          })(<Input placeholder="请输入姓名" />)}
        </FormItem>
        <Button type="primary" htmlType="submit">提交</Button>
        <Button type="button" onClick={this.handleReset}>重置</Button>
      </Form>
    );
  }

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