REACTFC 的组件formlist怎么用
要使用form.list组件,需要先导入form模块,并使用form.list方法创建一个表单列表。
下面是一个使用form.list的示例:
import { Form, Input, Button } from 'antd';
import { form } from 'antd';
const DynamicForm = form.list()(Form);
const MyForm = () => {
const onFinish = (values: any) => {
console.log('Received values of form:', values);
};
return (
<DynamicForm name="dynamic_form_item" onFinish={onFinish}>
{(fields, { add, remove }) => (
<div>
{fields.map((field, index) => (
<Form.Item
{...field}
name={[field.name, 'input']}
fieldKey={[field.fieldKey, 'input']}
rules={[{ required: true, message: 'Missing input' }]}
>
<Input placeholder="Input" />
</Form.Item>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block>
Add field
</Button>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</div>
)}
</DynamicForm>
);
};
export default MyForm;
在上面的示例中,form.list()方法用于将Form组件包装成一个带有表单列表功能的组件DynamicForm。然后在DynamicForm组件中,使用{(fields, { add, remove }) => ()}的形式来渲染表单列表。fields参数是一个数组,包含了表单列表的所有字段的信息。add函数用于添加新的字段,remove函数用于移除指定的字段。
在示例中,每个字段都使用Form.Item组件来包裹Input组件,通过{...field}将字段的属性传递给Form.Item组件。每个字段都有一个name属性用于标识字段的唯一性。
最后,使用DynamicForm组件作为整个表单的根组件,并在Form.Item中使用add函数和remove函数来添加和移除字段
原文地址: http://www.cveoy.top/t/topic/iX0P 著作权归作者所有。请勿转载和采集!