react 列表条件筛选后数据编辑返回列表数据刷新问题

最新推荐文章于 2024-05-27 22:56:36 发布

原创最新推荐文章于 2024-05-27 22:56:36 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react

react 同时被 2 个专栏收录

4 篇文章

订阅专栏

保留条件刷新

1 篇文章

订阅专栏

我的配置是

     "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();//请求列表数据

}