有人知道ant-design用list遍历出来from表单,怎么才能获取这些表单的数据呢

我有一个list,每一项是一个表单需要填,每一项的类型不同,表单内容也不一样,所以我想遍历表单,再把所有表单的数据放进数组提交。
我用newList的id作为表单的ref,但是感觉不太对,获取不了遍历出来的表单数据。应该怎么获取遍历的这些表单的数据呢
TIM截图20200324150527.png
`

//后台返回的数据
let newList = [
    {
        response: {
            data: {
                downNum: "0",
                id: "69739548673895232",
                module: "res-resource",
                name: "1.jpg",
                path: "/common/file/view/res-resource/f7088c51-021d-4c8d-9874-eff967fe63c1.jpg",
                size: "14192",
                timelong: 0,
                type: "6",
                uploadTime: "1583894404102",
                usersId: "2",
            },
        }
    },
    {
        response: {
            data: {
                downNum: "0",
                id: "69739548703255360",
                module: "res-resource",
                name: "5.jpg",
                path: "/common/file/view/res-resource/fc02a308-5f43-41c7-8185-ba81007d3aeb.jpg",
                size: "16088",
                timelong: 0,
                type: "6",
                uploadTime: "1583894404109",
                usersId: "2",
            }
        },
    }
] 
     
const NestedFrom = Form.create({ name: 'registers' })(
    class extends React.Component {
        state = {
            butloading: false,
        };

        componentDidMount() {
        }

        //提交
        handleSubmit = e => {
            e.preventDefault();
            let _this= this;
            const { newList } = this.props;
            this.props.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log('页面公共部分表单', values,)
                    console.log('_this',_this)
                    newList.map(function (item, index) {
                       let refa = item.response.data.id;
                       _this.refId = refa;//我应该怎么去获取遍历出来的表单的数据呢
                        console.log('id', _this.refId )
                    })
                }
            });
        };
        render() {
            const { getFieldDecorator } = this.props.form;
            const { newList } = this.props;
            let _this = this;
            return (
                <div>
                <Form layout="inline" onSubmit={this.handleSubmit} >
                    <Row gutter={24} >
                    <Col span={12} >
                                <Form.Item label="地址:">
                                    {getFieldDecorator('website')(<Input placeholder="请输入url地址"/>)}
                                </Form.Item>
                            </Col>
                            </Row>
                    </Form>
                        <Row gutter={24}  >
                            <Col span={24}>
                                <Collapse onChange={this.callback} >
                                    {
                                        newList.map(function (arr, index) {
                                            let list = arr.response.data
                                            let type = heFileTpe(list.type);
                                            let HeartSvg = () => (
                                                <img src={type} />
                                            );
                                            let kbs = bytesToSize(list.size);
                                            let refId = list.id;

                                            return (
                                                <Panel header={
                                                    <div className="yy-latest-box" >
                                                        <Icon className="yy-icon" component={HeartSvg} />
                                                        <div className="yy-zhugan">
                                                            <div className="yy-name">{list.name}</div>
                                                            <div className="steps-two-size">大小:{kbs}</div>
                                                            {list.type == 8 ? <div className="steps-two-timelong">时长:{list.timelong}</div> : null}
                                                            <Button style={{ marginLeft: '20px' }} type="primary" size="small" onClick={event => {
                                                                event.stopPropagation();
                                                                _this.goPreview(list)
                                                            }}>预览</Button>
                                                            <Button style={{ marginLeft: '20px' }} type="link" size="small" onClick={event => {
                                                                event.stopPropagation();
                                                                _this.onDelete
                                                                    (list.id)
                                                            }}
                                                            >删除</Button>
                                                        </div>
                                                        <div className="steps-extra" >收起/折叠</div>
                                                    </div>}
                                                    key={list.id}
                                                >
                                                {/* 遍历的表单*/}
                                                <TeachersManagementNew
                                                    wrappedComponentRef={(inst)=>{refId = inst}} //ref
                                                />
                                                </Panel>
                                            )
                                        })
                                    }
                                </Collapse>
                            </Col>
                            <Col span={24} >
                                <Form.Item>
                                    <Button
                                        type="primary" htmlType="submit"
                                        onClick={this.handleSubmit}
                                    >
                                        提交
                                </Button>
                                </Form.Item>
                            </Col>
                        </Row>
                </div>
            );
        }
    }
);

const TeachersManagementNew = Form.create({ name: 'registers' })(
    class extends React.Component {
        state = {
        };
        componentDidMount() {
        }
        //提交
        handleSubmit = e => {
            e.preventDefault();
            const { schoolId } = this.state;
            this.props.form.validateFieldsAndScroll((err, values) => {
                if (!err) {
                    console.log(values)
                }
            });
        };

        render() {
            const { getFieldDecorator } = this.props.form;
            return (
                <div>
                <Form layout="inline" onSubmit={this.handleSubmit} >
                    <Row gutter={24}  >
                        <Col span={12}  >
                            <Form.Item label="官网url地址:"  >
                                {getFieldDecorator('website')(<Input placeholder="请输入学校官网url地址"   />)}
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                </div>
            );
        }
    }
);

`

阅读 4.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题