我的配置是
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-router": "^4.2.0",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-router-redux": "^4.0.8",
列表页我用的是
this.props.history.push 路由
列表页编辑代码如下
<Form layout="inline" style={{ marginTop: 15 }}>
<Form.Item label="名称">
{getFieldDecorator('name', {
initialValue: ''
})(
<Input placeholder="name" />
)}
</Form.Item>
</Form>
<Button
onClick={() => {
const { form } = this.props;
const formValue = form.getFieldsValue(['name']); //getFieldDecorator(ID)
this.props.history.push({
pathname: 'url/edit',
state: {
state: formValue
}
})
}}
</Button>
获取form 表单指定id 对应的值,然后下发到编辑页面,在编辑页我们在返回事件内部直接抛出即可
<Button onClick={() => {
const { location: { state } } = this.props;
that.props.history.push({
pathname: 'url/list',
state
})
}}>返回</Button>
当我们触发返回事件时,以跳转到列表页面,我们在列表页接受并重新负值给form 表单即可
componentDidMount() {
const { location: { state = {} }, form } = this.props;
const { name, ...rest } = state;
form.setFieldsValue({ ...rest.state });
this.onRefsh();//请求列表数据
}