首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在Antd 4中使用setFieldsValue在Form.List中动态设置值?

在Antd 4中,可以使用setFieldsValue方法在Form.List中动态设置值。Form.List是Antd中用于处理动态表单项的组件,它可以根据数据动态生成表单项,并且可以通过setFieldsValue方法来设置表单项的值。

具体操作步骤如下:

  1. 首先,确保你已经正确引入了Antd的相关组件和样式。
  2. 在你的表单组件中,使用Form.List组件来处理动态表单项。例如:
代码语言:txt
复制
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;
  1. 在上述代码中,我们使用了Form.List组件来处理动态表单项。在Form.List的render props函数中,我们可以通过fields参数获取到当前的表单项列表,并通过add和remove方法来添加和删除表单项。
  2. 在每个表单项的Input组件中,我们通过onChange事件来触发setDynamicFieldValue方法,该方法会根据当前表单项的索引和输入的值,动态更新表单项的值。
  3. 在setDynamicFieldValue方法中,我们首先通过form.getFieldsValue()获取到当前表单的所有字段值,然后获取到动态表单项的值dynamicFieldsValue。接着,我们根据当前表单项的索引index和输入的值value,更新dynamicFieldsValue数组中对应索引的值。最后,通过form.setFieldsValue方法将更新后的值重新设置给dynamicFields字段。

这样,当用户输入值时,表单项的值会动态更新。

关于Antd 4的更多使用方法和相关组件,你可以参考腾讯云Antd官方文档:Antd 4官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券