antd forms - <Form.Item> 的复杂子元素答案

【问题标题】：antd forms - complex child elements of <Form.Item>antd forms - <Form.Item> 的复杂子元素
【发布时间】：2020-08-11 12:20:55
【问题描述】：

我有一个像这样的antd表单：

return(   
   <Form
    {...layout}
    form={form}
    onFinish={onFinish}
   >
    <Form.Item
        label="Bezeichnung"
        name="name"
        initialValue={resource ? resource.name : ""}
        rules={[{ required: true, message: 'Bitte Bezeichnung eingeben.' }]}
    >
        <Input />
    </Form.Item>
    <Form.Item
        label="Farbe"
        name="color"
        initialValue={resource ? resource.color : undefined}
    >
        <Input />
    </Form.Item>
    <ColorPickerButton 
        onColorChange={(color) => {
            form.setFieldsValue({
                color: color.hex
            });
        }}
    />
    </Form>
);

正如您在此处看到的，我有一个额外的按钮（独立于表单），它充当颜色选择器。然后将所选颜色与

一起使用

form.setFieldsValue({
    color: color.hex
});

我现在的问题是：有没有更方便的方法将<Input /> 组件与<ColorPickerButton /> 组件放在一起使用它：

    <Form.Item
        label="Farbe"
        name="color"
        initialValue={resource ? resource.color : undefined}
    >
        <ColorPickerInput />
    </Form.Item>

【问题讨论】：

标签： reactjs forms antd

【解决方案1】：

您想在Form.Item 和ColorPickerInput 之间进行某种“自动绑定”吗？您可以尝试将form 和name 传递给ColorPickerInput 组件，并在ColorPickerButton.onColorChange 内调用form.setFieldsValue({[name]: value}) 进行更新。

【讨论】：

这一行 --> form.setFieldsValue({[name]: value}) 非常有帮助。非常感谢