业务需求
父组件获取子组件数值，子组件是一个表单，包含Cascader、Select两种类型组件，其中能源类型Select根据Cascader数值拿到，效果如图：
其中antd版本3.26.3
实现思路
通过使用 onFieldsChange获取表单值，通过回调函数传给父组件。antd官方说明
父组件
// changedFields是子组件表单变化值，allFields是子组件表单所有值
handleSearchBarFormChange = (changedFields, allFields) => {
const obj = {
buildingId: allFields.buildings.value[1],
energySort: allFields.sorts.value,
year: allFields.year.value,
};
if (obj.buildingId !== null && obj.energySort !== null && obj.year !== null) {
this.generateTreeData(this.pageType, obj.buildingId, obj.energySort);
this.setState({
searchBar: obj,
});
}
};
render() {
return (
<EnergySortSearchBar
// 父组件通过onChange获得子组件表单值
onChange={
this.handleSearchBarFormChange}
initState={
this.handleInitSearchBarValues}
/>
);
}
子组件
@Form.create({
onFieldsChange(props, changedFields, allFields) {
// 关键在这里，通过onFieldsChange获取表单变化值以及表单所有值，
// 通过回调函数传给父组件
props.onChange(changedFields, allFields);
},
})
class EnergySortSearchBar extends PureComponent {
/**
* 渲染建筑级联Cascade
*/
renderBuildingCascade = () => {
// 省略部分代码
return (
<FormItem name="buildings" label="建筑名称" labelCol={
8} wrapperCol={
16}>
{
getFieldDecorator(`buildings`, {
initialValue,
})(<Cascader {
...cProps} className={
styles.item} onChange={
this.handleBuildingChange} />)}
</FormItem>
);
};
/**
* 渲染能源种类Select
*/
renderEnergySorts = () => {
// 省略部分代码
return (
<FormItem label="分类能耗" labelCol={
8} wrapperCol={
16}>
{
getFieldDecorator(`sorts`, {
initialValue: sorts !== null ? sorts[0].name : null,
})(
<Select changeOnSelect placeholder="请选择能耗" className={
styles.item}>
{
this.renderOptions(sorts)}
</Select>
)}
</FormItem>
);
};
/**
* 渲染YearPicker
* @return JSX
*/
renderYearPicker = () => {
// 省略部分代码
return (
<FormItem label="年份" labelCol={
8} wrapperCol={
16}>
{
getFieldDecorator(`year`, {
initialValue: moment().format('YYYY'),
})(<YearPicker onChange={
this.handleYear} className={
styles.item} displayDefaultTime />)}
</FormItem>
);
};
render() {
// 省略部分代码
return (
<div className={
styles.tableListForm}>
<Form layout="inline">
<Row gutter={
16} type="flex">
<Col span={
6}>{
this.renderBuildingCascade()}</Col> /
<Col span={
4}>{
this.renderEnergySorts()}</Col>
<Col span={
4}>{
this.renderYearPicker()}</Col>
</Row>
</Form>
</div>
);
}
}