庖丁解牛Ant Design之Form组件

2023-10-05 08:16:16

Antd Form相信大家并不陌生，在中后台业务中，表单页面经常用到，但是大家知道它是如何设计和实现的吗？本文并不涉及具体源码分析，而是手把手带你实现一个简易版的Antd Form。

1. Form组件

Form组件是Antd Form的核心，它负责管理表单的状态、校验规则和提交逻辑。我们首先来实现一个简单的Form组件：

import React, { useState } from 'react';

const Form = ({ children, onSubmit }) => {
  const [values, setValues] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(values);
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  return (
    <form onSubmit={handleSubmit}>
      {children}
    </form>
  );
};

export default Form;

这个Form组件接收两个props：children和onSubmit。children是表单的子元素，onSubmit是表单提交时的回调函数。

在Form组件内部，我们使用useState来管理表单的状态。values是一个对象，它包含了表单中所有输入框的值。

当用户在表单中输入值时，handleChange函数会被触发。该函数将更新values对象，并把新的值存储在状态中。

当用户点击提交按钮时，handleSubmit函数会被触发。该函数将调用onSubmit回调函数，并将values对象作为参数传递给它。

2. Field组件

Field组件是Antd Form中另一个重要的组件，它负责管理单个输入框的状态和校验规则。我们接下来来实现一个简单的Field组件：

import React, { useState } from 'react';

const Field = ({ name, label, rules, children }) => {
  const [value, setValue] = useState('');
  const [error, setError] = useState('');

  const handleChange = (e) => {
    const { value } = e.target;
    setValue(value);

    // 校验规则
    const errors = rules.map((rule) => {
      if (rule.required && value === '') {
        return rule.message;
      }
      return null;
    });

    setError(errors.find((error) => error !== null));
  };

  return (
    <div className="ant-form-item">
      <label className="ant-form-item-label">{label}</label>
      <div className="ant-form-item-control">
        {children}
        <div className="ant-form-item-explain">{error}</div>
      </div>
    </div>
  );
};

export default Field;

这个Field组件接收四个props：name、label、rules和children。name是输入框的名称，label是输入框的标签，rules是输入框的校验规则，children是输入框本身。

在Field组件内部，我们使用useState来管理输入框的状态和校验状态。value是输入框的值，error是输入框的错误信息。

当用户在输入框中输入值时，handleChange函数会被触发。该函数将更新value和error状态。

3. 使用Antd Form

现在我们已经实现了Form和Field两个组件，就可以使用它们来构建一个简单的表单了。

import React from 'react';
import { Form, Field } from './components';

const App = () => {
  const handleSubmit = (values) => {
    console.log(values);
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Field name="username" label="用户名" rules={[{ required: true, message: '请输入用户名' }]}>
        <input type="text" />
      </Field>
      <Field name="password" label="密码" rules={[{ required: true, message: '请输入密码' }]}>
        <input type="password" />
      </Field>
      <button type="submit">提交</button>
    </Form>
  );
};

export default App;