ant design使用React.Component自定义封装的upload无法获取值

自定义封装的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。

请大神指点啊!!!!!!!!!

阅读 8.9k
3 个回答

其实就是要实现getFieldDecorator的传值与取值就可以了。
传值:使用options.valuePropName和options.initialValue为封装组件的props值传值就行;
取值:封装的组件触发onChange事件传值;
https://ant.design/components...参数

解决了吗,求代码

新手上路,请多包涵

如你的例子中,想要改变thumbnail的值

<FormItem label="缩略图" {...formItemLayout}>
    {getFieldDecorator('thumbnail', {
        valuePropName: 'fileList',
        getValueFromEvent: this.normFile,
    })(
        <Thumbnail />
    )}
</FormItem>

然后写方法

normFile=(e)=>{
    if (!e || !e.fileList) {
      return e;
    }
    // 调用接口获取后台返回的值,假如为resurl
    // todo
    return resurl; // 这样return的话thumbnail字段就会自动变更为resurl的值
  }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进