react 页面跳转后返回新页面 筛选条件消失了

 问题::当筛选条件写完后 点击查询  点击审核(跳转到新的页面进行审核),当审核完回来页面又恢复原始的页面了,筛选条件也消失了。

解决::当点击查询的时候,将查询条件存储到本地,页面返回挂在完成后,componentDidMount() {}在这里面取出存储的值,然后放回输入框里面,放回的方法1.初始值getFieldDecorator API的initialValue,2、setFieldsValue({})

代码::

// 查询按钮事件  
  onSubmit = (e) => {
    e.preventDefault();
    const { form } = this.props;
//存下筛选条件*********************************************
    let searchData = JSON.stringify(form.getFieldsValue());
    sessionStorage.setItem("searchData", searchData);
    console.log(searchData);
    // fieldsValue 表单填写的数据
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      // 如果存在日期,将日期转换
      // if (fieldsValue.firstRegisterDate) {
      //   fieldsValue.firstRegisterDate = moment(fieldsValue.firstRegisterDate).format('YYYY-MM-DD');
      // }
      this.state.formValues = filterParams(fieldsValue);
      this.state.formValues.auditStatus = +this.state.formValues.auditStatus;
      this.state.pageNum = 1;
      this.getList();
    });
  };

 取回赋值:这里用的是初始值的写法 

// 页面挂载完成后,请求数据
  componentDidMount() {
    //把取到的JSON格式的转化为JS格式
    let searchData = JSON.parse(sessionStorage.getItem('searchData'));
    if (searchData) {
      //直接setFieldsValue()可以把值赋值到表单里面
      //  this.props.form.setFieldsValue(searchData);
      this.state.formValues = searchData;
      //完了之后记得把本地的数据清除掉
      // sessionStorage.removeItem("searchData");
    };
    this.getList();
  }
   <Form layout="inline" onSubmit={this.onSubmit}>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={8} sm={24}>
            <Form.Item label="商户名称">
            {getFieldDecorator('merchantName', {initialValue:this.state.formValues.merchantName || '',})(<Input placeholder="请输入商户名称" />)}
            </Form.Item>
          </Col>
          <Col md={8} sm={24}>
            <FormItem label="审核状态">
              {getFieldDecorator('auditsStatus',{initialValue:this.state.formValues.auditsStatus || '',})(
                <Select placeholder="请选择">
                  <Option value="0">待审核</Option>
                  <Option value="1">通过</Option>
                  <Option value="2">拒绝</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24} offset={8}>
            <div style={{ overflow: 'hidden', float: 'right' }}>
              <div style={{ marginBottom: 24 }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                  重置
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </Form>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值