主要讲添加和编辑用同一个Form.list表单，来回切换并且改变此表单的默认展示几项
相信大家用过antdesign中的Form.list时候都会遇到一个问题吧，就是怎么默认值显示一项？
然后再网上也搜了很多方法，结果还是没有达到自己想要的效果。在这里有一个坑，大家肯定都踩过，我们再Form.list中的属性发现一个initialValue(默认值)
initialValue的用法：
<Form name="dynamic_form_nest_item" onFinish={onFinish} form={form} // style={{ maxWidth: 600 }} style={{ width: '100%' }} autoComplete="off" > <Form.List name="users" initialValue={[{}]}> {(fields, { add, remove }) => ( <> {fields.map(({ key, name, ...restField }) => ( <div key={key} style={{ display: 'flex', marginBottom: 8, flexWrap: 'wrap', width: '100%' }} > <Form.Item style={{ width: '100%' }} {...restField} label={'证书信息'} name={[name, 'name']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="证书名称" /> </Form.Item> <Button type="primary" style={{ marginTop: '130px', marginLeft: '-230px' }} onClick={() => remove(name)} danger > <MinusCircleOutlined /> 删除 </Button> </div> ))} <Form.Item style={{ width: '15%', marginTop: '-40px' }}> <Button type="primary" onClick={() => { addss(fields); add(); }} block icon={<PlusOutlined />} > 新建 </Button> </Form.Item> </> )} </Form.List> <Form.Item> <Button type="primary" htmlType="submit"> 确认 </Button>{' '} <Button>取消</Button> </Form.Item> </Form>
配合Form.list使用，他的格式是一个数组包多个对象，有几个对象就默认展示几项，非常方便，但是呢这个属性他有一个弊端，当我们，已经给initialValue赋值一次之后可以再次赋值，但是这个initialValue默认值就无法再改变了，除非刷新，希望大家明白默认值的意思。
const [data,setData] = useState([{}]) <Form.List name="users" initialValue={data} /> setData([{},{}]) //不行 let array = data setData([...array]) //也不行
总之各种方法都不行，就在我屋头闷水的时候想到了一个方案，不知道大家有没有注意到表单中的fields表单展示几项都和他息息相关，竟然都是围绕这他来进行增加和删除的，那么我们可以把他换成我们自己创建的一个变量啊，然后对这个变量进行操作！
const [number, setNumber] = useState([{}]);
此时我们就不用Form.list了，用map循环。
<Form name="dynamic_form_nest_item" onFinish={onFinish} onFinishFailed={onFinishFailed} form={form} // style={{ maxWidth: 600 }} style={{ width: '100%' }} autoComplete="off" > {/* <Form.List name="users"> {(fields, { add, remove }) => ( */} <> {number.map((key, name) => ( <div key={name} style={{ display: 'flex', marginBottom: 8, flexWrap: 'wrap', width: '100%' }} > <Form.Item style={{ width: '100%' }} label={'证书信息'} name={[name, name + 'name']} rules={[{ required: true, message: 'Missing last name' }]} > <Input placeholder="证书名称" /> </Form.Item> <Button type="primary" style={{ marginTop: '130px', marginLeft: '-230px' }} // onClick={() => remove(name)} danger > <MinusCircleOutlined /> 删除 </Button> </div> ))} <Form.Item style={{ width: '15%', marginTop: '-40px' }}> <Button type="primary" onClick={() => { addss(); // add(); }} block icon={<PlusOutlined />} > 新建 </Button> </Form.Item> </> {/* )} */} {/* </Form.List> */} <Form.Item> <Button type="primary" htmlType="submit"> 确认 </Button>{' '} <Button>取消</Button> </Form.Item> </Form>
如果想要新增一项只需要给number加上一个空对象就行了，删除，同理删除一个对象
下期讲如何回显数据，这和name={[name, name + 'name']}息息相关
