自定义封装的React.Component无法通过getFieldDecorator获取值。
自定义的组件
class Thumbnail extends React.Component {
state = {};
handleChange = (info) => {
console.log(info);
if (info.file.status === 'done') {
// Get this url from response in real world.
getBase64(info.file.originFileObj, imageUrl => this.setState({imageUrl}));
}
}
render() {
const imageUrl = this.state.imageUrl;
return (
<Upload
className="avatar-uploader"
name="file"
showUploadList={false}
action="/uploa.do"
beforeUpload={beforeUpload}
onChange={this.handleChange}
>
{
imageUrl ?
<img src={imageUrl} alt="" className="avatar"/> :
<Icon type="plus" className="avatar-uploader-trigger"/>
}
</Upload>
);
}
};
使用getFieldDecorator的引用
<FormItem label="缩略图" {...formItemLayout}>
{getFieldDecorator('thumbnail', {
valuePropName: 'fileList',
getValueFromEvent: this.normFile,
})(
<Thumbnail />
)}
</FormItem>
调用值
handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
得到的值thumbnail为undefined。
请大神指点啊!!!!!!!!!
其实就是要实现getFieldDecorator的传值与取值就可以了。
传值:使用options.valuePropName和options.initialValue为封装组件的props值传值就行;
取值:封装的组件触发onChange事件传值;
https://ant.design/components...参数