Form动态表单-删除%26新增

动态表单

https://github.com/Open-Federation/json-schema-editor-visual
https://github.com/ant-design/ant-design/discussions/37175
https://hellosean1025.github.io/json-schema-visual-editor/

antd动态增加删除表单

1. antd动态新增表单：在list后新增一个空对象，让其多一条数据，再重新渲染
2. 删除有所改变，首先，form 表单的 key
   1. 使用 data.0.name 这样的格式作为 某个表单的 key, 那么根据form的机制
   2. 会自动产生 data: [{name: ‘xx’}] 这样的数据格式；也不用我们再次处理了
3. https://blog.csdn.net/zr15829039341/article/details/106052723/

删除bug

1. 不管删除哪一个只会删除最后一个，原因：删除时，没有 setFieldsValue重新设置值
2. 删除时：获取当前的所有表单值，是为了等会执行表单替换
3. 循环这个获取的表单值，再找出删除的这个index，然后把后面的表单重新赋值，往前移动一个
4. 删除获取的表单子，还要删除map的数组长度

Form组件setFieldsValue方法的时候警告

1. https://zhuanlan.zhihu.com/p/67937366
2. form.setFieldsValue传来的数据这个方法只能适用于field存在的前提下，即数据和field是一对一的关系

import React from 'react';
import { Form, Input, Button, Icon, Row, Col } from 'antd';
const formLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
}
const FormList = (props) => {
  const { getFieldDecorator, getFieldValue, setFieldsValue } = props.form
  const [list, setList] = React.useState([])
  const prefix = 'list' // 就是 useEffect里面的 const data
  const formData = ['name', 'phone', 'email'] // 就是字段的名称
  React.useEffect(() => {
    const data = [ // ajax获取的数组，用于编辑时回显到input框上
      { name: 'jim', phone: '18923095555', email: 'jim@live.com' }, 
      { name: 'lucy', phone: '13523456666', email: 'lucy@lucy.com' },
      { name: '珠珠', phone: '010-89097777', email: 'zhuzhu@zhu.com' },
      { name: '春风', phone: '13689898888', email: 'chunfeng@chun.com' },
    ]
    setList(data)
  }, []);
  const onDelete = (i) => {
    // 删除时，获取当前的所有表单值
    const lists = getFieldValue(prefix)
    console.log(prefix, i, lists, 'delete100')
    // 删除后替换
    for (let index in lists) {
      const nIndex = Number(index)
      // 循环这个表单list值，再找出删除的这个index，然后把后面的表单重新赋值，往前移动一个
      if (nIndex >= i && lists[nIndex + 1]) {
        // ["name", "phone"]
        formData.map(item => setFieldsValue({[`${prefix}.${index}.${item}`]: lists[nIndex + 1][item]}))
      }
    }
    // 删除循环数组的长度
    const newList = list.filter((row, idx) => idx !== i)
    setList(newList);
  }
  const onAdd = () => {
    const row  = {name: '', phone: ''}
    setList([...list, row])
  }
  const onChange = (key, value, index) => {
    const data = JSON.parse(JSON.stringify(list))
    data[index][key] = value
    setList(data)
    console.log(key, value, index, list)
  }
  return (
    <Form>
      {
        list.map((item, index) => (
          <Row key={`table-${index}`} className="form-row"> 
            {/* item = {name: "jim", phone: "18923097888"} */}
            <Col span={10}>
              <Form.Item label="姓名" {...formLayout}>
                {getFieldDecorator(`${prefix}.${index}.name`, {
                  rules: [{ required: true, message: '请填写姓名'}],
                  initialValue: item.name
                })(<Input 
                  onChange={(ev) => onChange('name', ev.target.value, index)} 
                  maxLength={30} 
                  placeholder="请填写姓名" />)}
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item label="手机" {...formLayout}>
                {getFieldDecorator(`${prefix}.${index}.phone`, {
                  rules: [{ required: true, message: '请填写手机'}],
                  initialValue: item.phone
                })(<Input 
                  onChange={(ev) => onChange('phone', ev.target.value, index)} 
                  maxLength={30} 
                  placeholder="请填写手机" />)}
              </Form.Item>
            </Col>
            { 
            // list && list.length > 1 && 
              <Col span={4}>
                <Button 
                  type="link" 
                  onClick={() => onDelete(index) }
                ><Icon type="minus-circle" /></Button>
              </Col>
            }
          </Row>
        ))
      }
      <Button 
        style={{ width: '100%', marginTop: 8 }}
        type="dashed"
        icon="plus"
        onClick={onAdd}
      >
        添加
      </Button>
    </Form> 
  );
};
export default Form.create()(FormList)