antd 动态增减表单项默认呈现一组表单项

本文主要是介绍antd 动态增减表单项默认呈现一组表单项，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 在Ant Design（antd）中，你可以使用Form.List组件来动态增减表单项。

import React from 'react';
import { Form, Input, Button, List } from 'antd';const Demo = () => {const onFinish = (values) => {console.log('Received values of form: ', values);};return (<FormonFinish={onFinish}initialValues={{users: [{ name: 'John', age: 32 },{ name: 'Sally', age: 26 },],}}><List name="users">{(fields, { add, remove }) => (<>{fields.map((field) => (<Form.Item{...field}key={field.key}name={field.name}fieldKey={field.fieldKey}><Input placeholder="Name" /></Form.Item>))}<Button type="dashed" onClick={() => add()} block>Add field</Button><Button type="primary" htmlType="submit">Submit</Button></>)}</List></Form>);
};export default Demo;

使用initialValues设置初始值，可直接设置为：initialValues={{users: [{}]}}。

这篇关于antd 动态增减表单项默认呈现一组表单项的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---