使用react antd的form組件虎眨，需要在其中包裹自定義子組件蟋软，但是該子組件的值能不能交給form組件統(tǒng)一管理呢？
image
不過直接這么貼圖嗽桩，你的體驗(yàn)肯定不夠好岳守，讓我來舉個(gè)例子。
父組件Father:
const Father: React.FC = () => {
return (
<div>
<Form
{...layout}
name="basic"
initialValues={{ remember: true }}
onFinish={onFinish}
>
{/* 設(shè)備類型 */}
<Form.Item required label="設(shè)備類型" name="source">
<Son
sourceList={sourceList}
hasDevNo={hasDevNo}
onChange={handleChange} //<======= 注意這里
/>
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
</div>
);
};
子組件Son：
const Son: React.FC = props => {
// 選擇設(shè)備類型
const handleChange = item => {
props.onChange(item.source); // <===== 注意這里
};
return (
<div className="device-type">
{/* 設(shè)備source彈框 */}
<Modal
title="設(shè)備類型"
visible={isModalVisible}
onCancel={handleCancel}
footer={null}
width={750}
>
<Table
columns={columns}
dataSource={props?.sourceList}
pagination={false}
/>
</Modal>
</div>
);
};
總結(jié)：首先父組件將自定義子組件包裹在Form.Item中碌冶，暴露onChange方法湿痢。子組件通過該onChange方法將要綁定的值emit到父組件。（這里注意扑庞，父組件不需要接受該值譬重，因?yàn)橐呀?jīng)被form控件挾持，因?yàn)榻惺芸亟M件）
THE END!
