表单里其它数据都没事,就嵌套结构部分有问题,我感觉是提交时刷新了state,但是不知道怎么解决这个情况呐
<NestedFrom newList={newList} />
const NestedFrom = Form.create({ name: 'registers' })(
class extends React.Component {
state = {
butloading: false,
stageLists: [],//所属栏目
catasList: [],//学段
};
componentDidMount() {
}
//所属栏目
getstageLists = () => {
let stageLists = [
{ id: "2", name: "学科资源", code: "xkzy", layer: "1", parentId: "8" },
{ id: "67187239871896512", name: "测试目录1(新)", code: "" }
]
this.setState({
stageLists
})
}
//提交
onSubmit = e => {
e.preventDefault();
let _this = this;
_this.setState({
butloading: true,
})
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log(values)
let arr = {};
arr.rootId = values.rootId;
arr.resFiles = values.resFiles;
// const arr ={...values);
// const arr =Object.assign({}, values);
//这里拿到的resFiles是['1','2','3']的结构,我处理成树形结构
const newresFiles = setDirectoryArr(arr);
console.log('提交', newresFiles)
_this.setState({
butloading: false,
})
}
}).catch(function (error) {
});;
};
//选择栏目后获取学段
onGenderChange = (id) => {
let catasList = [
{
label: "测试目录2(旧)",
value: "111",
children: [
{
label: "测试2",
value: "111222",
children: [],
}
]
},
{
label: "测试目录2(xin)",
value: "222",
children: [
{
label: "测试2",
value: "222333",
children: [],
}
]
}
]
this.setState({
catasList
})
}
//提示还未选择栏目
getcatasList = () => {
const catasListLength = this.state.catasList.length;
if (catasListLength <= 0) {
message.destroy()
message.warning('请先选择所属栏目');
} else {
message.destroy()
}
}
render() {
const { getFieldDecorator } = this.props.form;
const { stageLists, catasList } = this.state;
const { newList } = this.props;
let _this = this;
return (
<div>
<Form
layout="inline"
onSubmit={this.onSubmit}
>
<Row gutter={24}>
<Col span={12}>
<Form.Item label="所属栏目:" >
{getFieldDecorator('rootId', {
rules: [
{
required: true,
message: '请选择所属栏目',
},
],
})(
<Select
placeholder="请选择所属栏目"
//mode="multiple" //多选
style={{ width: "260px" }}
onMouseEnter={this.getstageLists}
allowClear//支持清除
onChange={this.onGenderChange}
>
{stageLists.map(function (list, index) {
return (
<Option key={list.id}>{list.name}</Option>
)
})
}
</Select>
)}
</Form.Item>
</Col>
<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>
<div>
<div>{list.name}</div>
<div>大小:{kbs}</div>
{list.type == 8 ? <div>时长:{list.timelong}</div> : null}
<Button type="primary" size="small" onClick={event => {
event.stopPropagation();
_this.goPreview(list)
}}>预览</Button>
<Button type="link" size="small" onClick={event => {
event.stopPropagation();
_this.onDelete
(list.id)
}}
>删除</Button>
</div>
<div >收起/折叠</div>
</div>}
key={list.id}
>
<Col span={12}>
<Form.Item label="学段:" >
{getFieldDecorator('resFiles.' + index + '.fileId', {
rules: [
{
required: true,
message: '请选择学段',
},
],
})(
<Cascader
placeholder="请选择学段"
options={catasList}
onMouseEnter={_this.getcatasList}//提示选择栏目
/>
)}
</Form.Item>
</Col>
</Panel>
)
})
}
</Collapse>
</Col>
<Col span={24} >
<Form.Item
>
<Button
type="primary" htmlType="submit"
loading={this.state.butloading}
>提交</Button>
</Form.Item>
</Col>
</Row>
</Form>
</div>
);
}
}
);