记录antd表单组件的Form.List的一个使用场景 如何自定义一个新的Form表单组件

记录antd表单组件的Form.List的一个使用场景

如何自定义一个新的Form表单组件

我们首先要了解，Form.Item 是如何绑定数据的，使用过的人都知道是通过name匹配数据传入组件，在组件数据更新后，将新的数据更新到表单存储。我们可以利用这一点，实现自定义一个新的表单项。这一点antd官方文档也有介绍。

编写简单的组件案例

import React from 'react';
import {
    Form, Input } from 'antd';
const {
    Item } = Form;
const MyFormComponent = ({
     value, onChange }) => {
   
  const triggerChange = changedValue => {
   
    if (onChange) {
   
      onChange(changedValue);
    }
  };
  const onInputChange = e => {
   
    triggerChange(e.target.value);
  };
  //可以是多个表单组件复合组成
  return (
        <Item label="链接" extra="链接" style={
   {
    marginBottom: 0 }}>
          <Input allowClear value={
   value} onChange={
   onInputChange} />
        </Item>
  );
};
export default MyFormComponent;

复合组件，单个组件内部实现联动（举个🌰）

有一个表单，表单有一个列表，列表每一项之间需要实现以下要求：

选择车系（car_series）->获取相应的金融产品数据（fincinal_detail）->限制金融首付比例（down_payment_ratio）

设计表单列表:

• 列表每一项之间的前三项需要联动；
• 列表每一项之间需要相互独立，互不影响；
• 列表的每一项和其他普通表单项一样通过name，自动传入数据。如果数据改变，自动更新表单；

实现思路：

• 定义一个新的组件，在组件内部处理三项之间的逻辑；
• 三项数据组合成为一个新的数据car_financial，通过新数据的name绑定到表单的新组件上；
• 联动组件内部的每一项之间还是使用真实的name绑定；

如此一来，组件前三项一旦更新，就会触发新定义的数据car_financial更新，car_financial更新之后，就会处理前三项的逻辑关系，更新当前可选择的项目，同时不影响表单数据提交验证。

import React, {
    useEffect, useState, useRef } from 'react';
import {
    Form, Cascader, InputNumber } from 'antd';
import {
    connect } from 'umi';

const {
    Item } = Form;
const CascaderCarFinancial = ({
   
  carSeriesData,
  carProps = {
   },
  financialProps = {
   },
  value = {
   },
  financialRate = {
   },
  dispatch,
  onChange = () => {
   },
}) => {
   
  const [financialList, setFinancialList] = useState([]);
  const [carsData, setCarsData] = useState([]);
  const [financialsData, setFinancialsData] = useState([]);
  const [firstPayData, setFirstPayData] = useState({
   });
  const financialRef = useRef(null);
  const rateRef = useRef(null);
  // 更新数据;
  const triggerChange = changedValue => {
   
    if (onChange) {
   
      onChange(changedValue);
    }
  };
  // 获取金融
  const getFinancial = async e