如何解决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
进行更新。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。