Form.List 嵌套 Form.List

比赛晋级
https://www.photophoto.cn/tupian/bisaijinjibiao.html

https://blog.csdn.net/m0_58293192/article/details/130752396
https://blog.csdn.net/GongWei_/article/details/119675911
https://www.lodashjs.com/docs/lodash.mergeWith#_mergewithobject-sources-customizer
https://segmentfault.com/a/1190000021187809

React Context说到底只是组件
当Context.Provider重新渲染的时候，它所有的子组件都被重新渲染了
for of 支持 return和 break，
缺点：没有 index
for of获取 index，用 entries()，
entries()返回一个可迭代的对象，包含数组的键值对 [key, value]；迭代对象中的数组索引作为 key，数组元素作为 value
for in需要判断 hasOwnProperty

for (const item of arr) {}
for (const [index, item] of arr.entries()) {}
function showMessage(success) {
  message.destroy();
  message.success('禁用成功');
}
function propsEqual(oldProps, props) {
  return isEqual(oldProps, props);
}
const values = {
  user: {
    name: '',
    phone: [135, 136, 136]
  }
}
<Form.List name="user">
  {(fields, { add, remove }) => (
    <>
      <Item>
        <Button type="dashed" onClick={() => add({
          name: '',
          phone: [{begin: '', end: ''}],
        })} icon={<PlusOutlined/>}>
          新增用户
        </Button>
      </Item>
      {fields.map((field) => (
        <div className="flex">
          <Row gutter={16} key={field.key} className="flex-1">
            <Col span={24}>
              <Item
                {...field}
                name={[field.name, 'name']}
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input />
              </Item>
            </Col>
            <Col span={24}>
              <Phone name={[field.name, 'phone']} />
            </Col>
          </Row>
          <Button
            type="link"
            onClick={() => remove(field.name)}
          >
            <MinusCircleOutlined />
          </Button>
        </div>
      ))}
    </>
  )}
</Form.List>
//
<Form.List name="level1List">
  {(level1Fields) => (
    <div>
      {level1Fields.map((level1Field, level1Index) => (
        <Form.List name={[level1Field.name, 'level2List']}    // notice here, using name path
        {(level2Fields) => (
          <div>
            {level2Fields.map((level2Field, level2Index) => (
              <Form.Item
                name={[level2Field.name, 'key']}  // notice the field name should be level2Field.name
              >
                <Input />
              </Form.Item>
            )}
          </div>
        )}
        </Form.List>
      )}
    </div>
  )}
</Form.List>

https://github.com/ant-design/ant-design/issues/23065
https://blog.csdn.net/zxz_learn/article/details/119896800

Phone 子节点

import React, { Fragment } from 'react';
import { array } from 'prop-types';
import { Form, Input, Row, Col, Button } from 'antd4';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
const { Item } = Form;
Phone.propTypes = {
  name: array.isRequired,
};
function Phone(props){
  const { name } = props;
  return (
    <Form.List name={name}>
      {(fields, { add, remove }) => (
        <Fragment>
          {fields.map((field) => (
            <div className="flex">
              <Row gutter={16} key={field.key} className="flex-1">
                <Col span={12}>
                  <Item
                    {...field}
                    name={[field.name, 'begin']}
                    rules={[{ required: true, message: '请输入开始时间' }]}
                  >
                    <Input
                      placeholder="请输入开始时间"
                    />
                  </Item>
                </Col>
                <Col span={12}>
                  <Item
                    {...field}
                    name={[field.name, 'end']}
                    rules={[{ required: true, message: '请输入结束时间' }]}
                  >
                    <Input
                      placeholder="请输入结束时间"
                    />
                  </Item>
                </Col>
              </Row>
              <div>
                <Button
                  type="link"
                  onClick={() => remove(field.name)}
                >
                  <MinusCircleOutlined/>
                </Button>
                <Button
                  type="link"
                  onClick={() => add({ begin: '', end: '' })}
                >
                  <PlusCircleOutlined/>
                </Button>
              </div>
            </div>
          ))}
        </Fragment>
      )}
    </Form.List>
  );
}
export default Phone;