Antd4 Form 亲自动手写吧（中篇）：核心逻辑实现

2024-01-05 21:26:46

核心逻辑设计

在上篇文章中，我们已经完成了表单的组件设计和基础逻辑的实现，接下来我们将开始实现表单的核心逻辑，即表单数据的收集、验证和提交。

表单数据的收集

表单数据的收集是通过监听表单字段的改变事件来实现的，当表单字段的值发生改变时，我们需要将这个值保存起来，以便以后使用。

//监听表单字段的改变事件
const handleChange = (e) => {
  const { name, value } = e.target;
  // 将表单字段的值保存起来
  const formData = { ...this.state.formData, [name]: value };
  this.setState({ formData });
};

表单数据的验证

表单数据的验证是通过定义一个验证规则对象来实现的，该对象包含了每个表单字段的验证规则，当表单提交时，我们会根据这个规则对象来验证表单字段的值是否有效。

// 定义验证规则对象
const rules = {
  username: {
    required: true,
    message: '请输入用户名',
  },
  password: {
    required: true,
    message: '请输入密码',
  },
};

// 表单提交时进行验证
const handleSubmit = (e) => {
  e.preventDefault();
  const { formData } = this.state;
  // 根据验证规则对象验证表单字段的值是否有效
  const errors = validate(formData, rules);
  if (errors) {
    // 表单验证不通过，显示错误信息
    this.setState({ errors });
  } else {
    // 表单验证通过，提交表单数据
    this.submitForm(formData);
  }
};

表单数据的提交

表单数据的提交是通过调用API接口来实现的，当表单验证通过后，我们会将表单数据发送给API接口，由API接口进行处理。

// 表单提交函数
const submitForm = (formData) => {
  // 调用API接口提交表单数据
  axios.post('/api/submitForm', formData).then((res) => {
    // 表单提交成功，显示成功信息
    this.setState({ success: true });
  }).catch((err) => {
    // 表单提交失败，显示错误信息
    this.setState({ error: true });
  });
};