今天在测试的时候遇到了问题，就是重置表单的时候自定义组件的值没有改变。
修改前的子组件代码的
import { Select } from 'antd';
import React, { Component } from 'react';
class SelectDom extends Component {
state = {
value: undefined,
};
handleChange = value => {
this.setState({ value });
this.props.onChange(value);
};
render() {
const { Option } = Select;
const {
data,
label = 'name',
keyValue = 'id',
showSearch = false,
showArrow = true,
placeholder = '不限',
} = this.props;
const options = data.map(item => (
<Option key={item[keyValue]} value={item[keyValue]} label={item[label]}>
{item[label]}
</Option>
));
return (
<Select
style={{ width: '200px' }}
allowClear
optionFilterProp="label"
showSearch={showSearch}
showArrow={showArrow}
placeholder={placeholder}
value={this.state.value}
onChange={this.handleChange}
>
{options}
</Select>
);
}
}
export default SelectDom;
修改前子组件的value是在自己组件内进行更新的，然后在触发父组件的change方法，这样可以在表单获取值的时候拿到子组件的value 但是再重置表单的时候无法更新子组件的状态。
修改后的子组件代码
import { Select } from 'antd';
import React from 'react';
import { connect } from 'dva';
const SelectDom = props => {
const { Option } = Select;
const {
data,
label = 'name',
keyValue = 'id',
showSearch = false,
showArrow = true,
placeholder = '不限',
} = props;
const options = data.map(item => (
<Option key={item[keyValue]} value={item[keyValue]} label={item[label]}>
{item[label]}
</Option>
));
return (
<Select
style={{ width: '200px' }}
allowClear
optionFilterProp="label"
showSearch={showSearch}
showArrow={showArrow}
placeholder={placeholder}
value={props.value}
onChange={v => props.onChange(v)}
>
{options}
</Select>
);
};
export default connect(
null,
null,
null,
{ forwardRef: true },
)(SelectDom);
父组件引用
import { SelectDom } from '../packetCenter/compontents';
<FormItem label="id">
{getFieldDecorator('fundId')(
<SelectDom data={fundList} placeholder="" showArrow={false} showSearch />,
)}
</FormItem>
使用getFieldDecorator后会自动为组件添加change方法和value属性，从而达到双向绑定。利用这个原理就把子组件的值直接与父组件进行绑定。这样在重置表单的时候就可以更新子组件的状态。
由于修改后的组件属于无状态组件，直接使用了函数组件去封装。这样在react16.x版本控制台会提示一个警告如图所示：
就使用了connect方法，connect第四个参数可以设置在父组件中使用ref
