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

我的配置是

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

}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值