在Antd 4中,可以使用setFieldsValue方法在Form.List中动态设置值。Form.List是Antd中用于处理动态表单项的组件,它可以根据数据动态生成表单项,并且可以通过setFieldsValue方法来设置表单项的值。
具体操作步骤如下:
import { Form, Input, Button } from 'antd';
const DynamicForm = () => {
const [form] = Form.useForm();
const onFinish = (values) => {
console.log('Form values:', values);
};
const setDynamicFieldValue = (index, value) => {
const fieldsValue = form.getFieldsValue();
const dynamicFieldsValue = fieldsValue.dynamicFields || [];
dynamicFieldsValue[index] = value;
form.setFieldsValue({ dynamicFields: dynamicFieldsValue });
};
return (
<Form form={form} onFinish={onFinish}>
<Form.List name="dynamicFields">
{(fields, { add, remove }) => (
<>
{fields.map((field, index) => (
<Form.Item
key={field.key}
label={`Field ${index + 1}`}
name={[field.name]}
>
<Input
onChange={(e) => setDynamicFieldValue(index, e.target.value)}
/>
</Form.Item>
))}
<Form.Item>
<Button type="dashed" onClick={() => add()} block>
Add Field
</Button>
</Form.Item>
</>
)}
</Form.List>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default DynamicForm;
这样,当用户输入值时,表单项的值会动态更新。
关于Antd 4的更多使用方法和相关组件,你可以参考腾讯云Antd官方文档:Antd 4官方文档。
领取专属 10元无门槛券
手把手带您无忧上云