reactjs - antd forms - 复杂的子元素

Question

我有一个像这样的 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>

Answer 1

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