我有一个list,每一项是一个表单需要填,每一项的类型不同,表单内容也不一样,所以我想遍历表单,再把所有表单的数据放进数组提交。
我用newList的id作为表单的ref,但是感觉不太对,获取不了遍历出来的表单数据。应该怎么获取遍历的这些表单的数据呢
`
//后台返回的数据
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>
);
}
}
);
`