how to package PicturesWall as input of FormItem

[yelgogogo]

最近在使用antd的组件。 当我试图把中的PicturesWall作为一个组件，并表单控件中引入时，不知道怎么才能把fileList的值回传，请问如何解决呢。

component of Ant Design is very useful. There is a sample of PicturesWall in as below: --------------------------------------------------------------------------------- import { Upload, Icon, Modal } from 'antd'; class PicturesWall extends React.Component { state = { previewVisible: false, previewImage: '', fileList: [{ uid: -1, name: 'xxx.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }], }; handleCancel = () => this.setState({ previewVisible: false }) handlePreview = (file) => { this.setState({ previewImage: file.url || file.thumbUrl, previewVisible: true, }); } handleChange = ({ fileList }) =>{ this.setState({ fileList }); console.log(this.state); console.log(this.props); } render() { const { previewVisible, previewImage, fileList } = this.state; const uploadButton = (

Upload

); return (

{fileList.length >= 3 ? null : uploadButton}

    <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
      <img alt="example" style={{ width: '100%' }} src={previewImage} />
    </Modal>
  </div>
);

} }

export default PicturesWall;

---

When I tried to use it in as

{ getFieldDecorator('imgUrl', { initialValue: imgUrl, })() } How could I get the right value(fileList) from < PicturesWall >

[yelgogogo]

Resolved by below code suggesting by others

<Upload action="//localhost:3300/upload" listType="picture-card" fileList={fileList} onPreview={this.handlePreview} onChange={this.handleChange}

handleChange = ({ fileList }) =>{ this.setState({ fileList }); const {onChange} = this.props; this.props.onChange(fileList.map(fl=>fl.response?(HOST+fl.response.path):''));

}