antd表单-<Form.Item>的复杂子元素

问题描述

我有一个像这样的蚂蚁形式：

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>

解决方法

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