问题::当筛选条件写完后 点击查询 点击审核(跳转到新的页面进行审核),当审核完回来页面又恢复原始的页面了,筛选条件也消失了。
解决::当点击查询的时候,将查询条件存储到本地,页面返回挂在完成后,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>