使用Antd4.x 的表单组件-From-From.List实践

使用Antd4.x 的表单组件-From-From.List实践

Form.List 实践（踩坑，避坑指南~~）

数据如下：

formData:{
    nodeProcessingTimelen:1111,
     remindMethods:[{status:1},{status:0}]   
}

  const [form] = Form.useForm()
  const [, update] = useReducer(x => x + 1, 0)
<Form
  form={form}
initialValues={formData}
  >
    <Form.Item name='nodeProcessingTimelen'>
    	<Input/>
    </Form.Item>
 <Form.List name="remindMethods">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }, idx) => (
              <div>
                <Form.Item
                  {...restField}
                  valuePropName="checked"
                  name={[name, 'status']}
                >
                  <Switch 
                      onChange={() => {
                      update() //
                    }}/>
                  {/* 
                  失效：
                  1.<Switch />121
                  2.<Switch /><div></div> 
                  3.<div> <Switch /></div>
                  */}
                </Form.Item>
                <Typography.Link 
                  disabled={!form.getFieldValue('remindMethods')
                  [key].status}>
                	
                </Typography.Link>
              </div>
            ))}
          </>
        )}

      </Form.List>
</Form>

1. Form.List 的children 是一个高阶函数
   默认返回 fields包含name,key…，方法：add, remove, move
2. Form.List的name 要和form数据的循环数组字段一致
3. Form.Item,name属性 一定要把fields.name 一起写上! name={[name, 'status']},否则也会失去默认值，form的双向绑定
4. 里面循环的Form.Item只能存在一个 表单组件；如果有多余节点。默认值会失效

按照上面的写法Form.List数据是可以回填回显的，form默认双向绑定

PS: 如果其他组件使用了 form的数据，例如上面的 组件 Link 的disable属性和 <switch/>联动， 可以使用 Form.useWatch hooks 监听;注意这 useWatch 在 4.20之后才有的hooks

在 4.20版本前 我的做法是通过 hooks -useReducer 强制更新视图