react组件返回上级时，记录上级组件状态

最近开发项目中，做管理后台，很多表格列表，有搜索条件，有分页；在跳转到详情页面，返回时，列表组件重新渲染，之前的搜索条件，分页什么的，都没有记住；还需要重新选，点击，交互体验很不好。

1.这里想到2两个办法，一个是吧搜索条件存到缓存中；每次进行读写；条件太多，或者多个上级页面跳转到同一页面，再返回是还得区分，很是麻烦。而且点击浏览器的返回按钮，没办法记录

这里我们用路由传递，参数的办法；上级页面把搜索条件传给，下级页面；下级页面返回时，在传给上级页面

主要看，state和history传值就行了

上级页面代码:

/*
 * 代理任务
 */
import React, { Component } from "react";
import Storage from "store2";
import History from "@utils/history";
import { Table, Select, Button, DatePicker, Modal, Notification, Row, Col } from "antd";
import moment from "moment";
import Request from "@utils/request";
import { urlAppendQuery } from "@utils/tools";
import { number4 } from "@utils/changeMoneyUnit";
import { bankShortName } from "@utils/codeToName";
import ModalDetail from "./form.js";
import "./style.less";
const curBranchCode = Storage.get("loginRes").bank.code;
const agentType = Storage.get("loginRes").bank["agentType"];
const chost = Storage.get("chost");
// 格式化时间
const format = "YYYY-MM-DD";
const taskStatus = {
  "1": "未出库",
  "2": "在途",
  "3": "已完成",
};
// 显示弹框标题
const showTitle = (modalType) => {
  let zz = "";
  if (modalType === "add") {
    zz = "新建任务";
  } else if (modalType === "edit") {
    zz = "修改任务";
  }
  return zz;
}
const columns = (_this) => [
  {
    title: "任务编号",
    dataIndex: "taskCode",
    width: 200,
    align: "center",
  },
  {
    title: "出库银行",
    dataIndex: "outBank",
    width: 150,
    align: "center",
    render: (text) => <span>{bankShortName(text) || "--"}</span>
  },
  {
    title: "入库银行",
    dataIndex: "inBank",
    width: 150,
    align: "center",
    render: (text) => <span>{bankShortName(text) || "--"}</span>
  },
  {
    title: "任务金额(元)",
    dataIndex: "amount",
    width: 100,
    align: "center",
    render: (text) => number4(text)
  },
  {
    title: "双流(元)",
    dataIndex: "doubleAmount",
    width: 100,
    align: "center",
    render: (text) => number4(text)
  },
  {
    title: "非双流(元)",
    dataIndex: "freeAmount",
    width: 100,
    align: "center",
    render: (text) => number4(text)
  },
  {
    title: "任务时间",
    dataIndex: "taskTime",
    align: "center",
    width: 100,
    render: (text) => <div>{text ? moment(text).format(format) : "--"}</div>
  },
  {
    title: "业务类型",
    dataIndex: "taskType",
    align: "center",
    width: 100,
    render: (text) => taskType[text]
  },
  {
    title: "业务状态",
    dataIndex: "taskStatus",
    align: "center",
    width: 100,
    render: (text) => taskStatus[text]
  },
  {
    title: "创建人",
    dataIndex: "createOperator",
    align: "center",
    width: 150,
    render: (text) => <span>{text || "--"}</span>
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
    width: 100,
    render: (text) => <div>{text ? moment(text).format(format) : "--"}</div>
  },
  {
    title: "操作",
    dataIndex: "操作",
    fixed: "right",
    align: "center",
    width: 240,
    render: (text, record) => (
      <div style={{ textAlign: "center" }}>
        {
          record.taskStatus === 1
          &&
          <Button
            type="link"
            size="small"
            onClick={() => {
              let aa = "";
              if ((curBranchCode === record.inBank) && agentType === 1) {
                aa = "pay";
              } else if ((curBranchCode === record.outBank) && agentType === 2) {
                aa = "pay";
              } else {
                aa = "get";
              }
              _this.toggleModal(record, "edit", aa); // get被代理行入库，pay被代理行出库
            }}
          >
            修改
          </Button>
        }
        {
          record.taskStatus === 2 && curBranchCode === record.inBank
          &&
          <Button
            type="link"
            size="small"
            onClick={() => {
              History.push("/transferInRoom", {
                taskCode: record.taskCode,
                type: "agent",
              });
            }}
          >
            入库
          </Button>
        }
        {
          record.taskStatus === 1 && curBranchCode === record.outBank
          &&
          <Button
            type="link"
            size="small"
            onClick={() => {
              History.push("/transferOutRoom", {
                taskCode: record.taskCode,
                type: "agent",
              });
            }}
          >
            出库
          </Button>
        }
        <Button
          type="link"
          size="small"
          onClick={() => {
            History.push("/transferTaskDetail", {
              taskCode: record.taskCode,
              fromUrl: "/agent",
              time: [_this.state.startTime, _this.state.endTime].join(","),
              taskStatus: _this.state.taskStatus,
              nowPage: _this.state.nowPage,
            });
          }}
        >
          任务详情
        </Button>
        {
          record.taskStatus === 1
          &&
          <Button
            type="link"
            roles="button"
            style={{ color: "#ff0000" }}
            onClick={() => {
              Modal.confirm({
                title: "确定删除代理任务？",
                content: (
                  <div>
                    <p>任务号：{record.taskCode}，</p>
                    <p>任务金额：{record.amount}</p>
                  </div>
                ),
                okText: "确认",
                cancelText: "取消",
                onOk() {
                  Request.POST(`/api/api/task/delete/${record.taskCode}`).then((res) => {
                    if (res.success) {
                      Notification.success({
                        message: res.message || "删除成功"
                      });
                      _this.loadData({ page: 1 }); // 回到第一页
                    } else {
                      Notification.error({
                        message: res.message || "删除失败"
                      });
                    }
                  });
                }
              });
            }}
          >
            删除
          </Button>
        }
      </div>
    )
  }
];
class View extends Component {
  constructor(props) {
    super(props);
    const isHaveSearch = Boolean(this.props.location.state);
    this.state = {
      startTime: isHaveSearch ? moment(this.props.location.state.time.split(",")[0]) : moment(),
      endTime: isHaveSearch ? moment(this.props.location.state.time.split(",")[1]) : moment(),
      tableSource: {}, // 表格数据
      modalShowed: false, // 调入调出弹出框
      modalType: "add", // 弹窗默认类型新增add,修改edit
      modalCode: "", // 弹窗任务编码
      modalId: "", // 弹窗任务ID
      moneyType: "", // 被代理行出入库类型
      taskTypeArr: [2], // 任务类型任务类型1：跨行调款 2：代理任务 3：向人行交款 4：从人行取款 5：上缴残损券
      taskStatus: isHaveSearch ? this.props.location.state.taskStatus : null, // 任务状态
      endOpen: false, // 时间框关闭
      nowPage: isHaveSearch ? this.props.location.state.nowPage : 1, // 当前分页
    };
  }
  componentDidMount() {
    this.loadData(); // 获取当天数据
  }
  disabledStartDate = startValue => {
    const { endTime } = this.state;
    if (!startValue || !endTime) {
      return false;
    }
    return startValue.valueOf() > endTime.valueOf();
  };

  disabledEndDate = endValue => {
    const { startTime } = this.state;
    if (!endValue || !startTime) {
      return false;
    }
    return endValue.valueOf() <= startTime.valueOf();
  };
  // 修改开始时间
  changeStartTime = (time) => {
    this.setState({
      startTime: time
    });
  };
  // 修改结束时间
  changeEndTime = (time) => {
    this.setState({
      endTime: time
    });
  };
  handleStartOpenChange = open => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  };

  handleEndOpenChange = open => {
    this.setState({ endOpen: open });
  };
  // 渲染页面数据
  loadData = async (obj) => {
    const {
      startTime,
      endTime,
      taskTypeArr,
      taskStatus,
      nowPage,
    } = this.state;
    // 获取任务列表
    Request.GET("/api/api/task/pageList", {
      params: {
        pageNo: (obj && obj.page) || nowPage,
        pageSize: (obj && obj.limit) || 10,
        taskTimeBegin: moment(startTime).format(format),
        taskTimeEnd: moment(endTime).format(format),
        taskTypeList: taskTypeArr,
        taskStatus,
      }
    }).then((res) => {
      const tableData = res.data;
      if (res.success) {
        this.setState({
          tableSource: tableData,
          nowPage: tableData.pageNo
        });
      } else {
        Notification.error({
          message: res.message || "后端接口数据错误"
        });
      }
    });
  };
  taskExport = ()=>{
    const {
      startTime,
      endTime,
      taskTypeArr,
      taskStatus,
    } = this.state;
    if (endTime.diff(startTime, "day") >= 366) {
      Notification.warn({
        message: "仅支持导出最近一年内的任务!"
      });
    } else {
      const downUrl = urlAppendQuery(`${chost}/cbank/api/task/export`,{
        "Access-Token":Storage.get("Authorization"),
        taskStatus,
        taskTimeBegin:startTime.format(format),
        taskTimeEnd:endTime.format(format),
        taskTypeList:taskTypeArr
      });
      // 导出任务
      window.location.href = downUrl;
    }
  }
  // 修改、添加
  toggleModal = (record, type, moneyType) => {
    this.setState({
      modalShowed: !this.state.modalShowed,
      modalType: type,
      modalcode: type === "add" ? "" : record.taskCode,
      modalId: type === "add" ? "" : record.id,
      moneyType: moneyType
    }, () => {
      console.log(this.state.modalcode, this.state.modalType);
    });
  };
  // 点击阴影显示
  handleCancel = () => {
    this.setState({
      modalShowed: !this.state.modalShowed,
    });
  };
  CancelTaskModal = () => {
    this.setState({
      modalShowed: !this.state.modalShowed,
    });
  };
  render() {
    const {
      startTime,
      endTime,
      taskStatus,
      endOpen,
      tableSource,
      modalShowed,
      modalType,
      moneyType,
    } = this.state;
    return (
      <div className="list">
        <Row>
          <Col span={14}>
            <Row style={{ "marginBottom": "20px" }}>
              <Col style={{ "marginBottom": "20px" }}>
                任务时间：
                <DatePicker
                  allowClear={!1}
                  disabledDate={this.disabledStartDate}
                  format="YYYY-MM-DD"
                  value={startTime}
                  placeholder="开始"
                  onChange={this.changeStartTime}
                  onOpenChange={this.handleStartOpenChange}
                />
                <span className="mlr5">--</span>
                <DatePicker
                  allowClear={!1}
                  disabledDate={this.disabledEndDate}
                  format="YYYY-MM-DD"
                  value={endTime}
                  placeholder="结束"
                  onChange={this.changeEndTime}
                  open={endOpen}
                  onOpenChange={this.handleEndOpenChange}
                />
              </Col>
              <Col>
                任务状态：
                <Select
                  style={{ width: "100px", marginRight: "25px" }}
                  value={taskStatus}
                  onChange={(val) => {
                    this.setState({
                      taskStatus: val
                    });
                  }}
                >
                  <Select.Option value={null}>全部</Select.Option>
                  <Select.Option value={1}>未出库</Select.Option>
                  <Select.Option value={2}>在途</Select.Option>
                  <Select.Option value={3}>已完成</Select.Option>
                </Select>
                <Button
                  type="primary"
                  onClick={() => {
                    this.loadData({page: 1});
                  }}
                >
                  查询
                </Button>
                <Button
                  type="primary"
                  style={{"marginLeft":"20px"}}
                  onClick={() => {
                    this.taskExport();
                  }}
                >
                  任务导出
                </Button>
              </Col>
            </Row>
          </Col>
          <Col span={10}>
            {
              agentType === 1 &&
              <Button
                style={{ margin: "10px", width: "150px", height: "60px" }}
                type="primary"
                onClick={() => {
                  this.toggleModal(null, "add", "get"); // get被代理行入库，pay被代理行出库
                }}
              >
                向被代理行调款
              </Button>
            }
            {
              agentType === 2 &&
              <div>
                <Button
                  style={{ margin: "10px", width: "150px", height: "60px" }}
                  type="primary"
                  onClick={() => {
                    this.toggleModal(null, "add", "get"); // get被代理行入库，pay被代理行出库
                  }}
                >
                  从代理行取款
                </Button>
                <Button
                  type="primary"
                  style={{ margin: "10px", width: "150px", height: "60px" }}
                  onClick={() => {
                    this.toggleModal(null, "add", "pay"); // get被代理行入库，pay被代理行出库
                  }}
                >
                  向代理行交款
                </Button>
              </div>
            }
          </Col>
        </Row>
        <Table
          scroll={{ x: 1950 }}
          dataSource={tableSource && tableSource.dataList}
          columns={columns(this)}
          rowSelection={null}
          rowKey="id"
          pagination={{
            showQuickJumper: false,
            total: tableSource.totalSize,
            current: tableSource.pageNo,
            pageSize: tableSource.pageSize,
            onChange: (page) => {
              this.loadData({ limit: tableSource.size, page });
            },
          }}
        />
        <Modal
          visible={modalShowed}
          footer={null}
          destroyOnClose={!!1}
          onCancel={() => this.handleCancel()}
          width="800px"
          maskClosable={!1}
          title={showTitle(modalType)}
        >
          <ModalDetail parentThis={this}
            modalType={modalType}
            moneyType={moneyType}
            modalCode={this.state.modalcode}
            modalId={this.state.modalId}
          />
        </Modal>
      </div>
    );
  }
}

export default View;

下级页面代码：

/*
 * 创建代理任务
 */
import React from "react";
import { Form, Notification, Button, Select, DatePicker, Row, Col, Input } from "antd";
import Request from "@utils/request";
import Storage from "store2";
import np from "number-precision";
import moment from "moment";
import { bankName } from "@utils/codeToName.js"
import ValutaForm from "./valutaForm.js";

const FormItem = Form.Item;
const moneyReg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; // 包含小数点
const dateFormat = "YYYY-MM-DD H:mm:ss";
const agentType = Storage.get("loginRes").bank["agentType"];
const currentBankCode = Storage.get("loginRes").bank.code;
const currentBankName = Storage.get("loginRes").bank.name;
class ViewForm extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.state = {
      valutaList: [], // 币值表
      inBank: "",
      outBank: "",
      taskTime: null,
      note: "", // 备注
      id: "",
      taskCode: "",
      agentBankCode: "", 
      agentBankName: "", 
      toAgentArr: [], 
      sureBtn: false, // 创建任务按钮
    };
  }
  componentDidMount() {
    if (agentType === 1) {
      this.getAgentArr(); // 查询代理点
      if (this.props.moneyType === "get") {
        this.setState({
          inBank: "",
          outBank: currentBankCode,
          agentBankCode: currentBankCode,
          agentBankName: currentBankName,
        });
      } else if (this.props.moneyType === "pay") {
        this.setState({
          inBank: currentBankCode,
          outBank: "",
          agentBankCode: currentBankCode,
          agentBankName: currentBankName,
        });
      }
    } else if (agentType === 2) {
      // 被代理行获取代理行的编码
      let agentBankCode = Storage.get("loginRes").bank["agentCode"];
      let zzArr = [{ "id": 1, "code": currentBankCode, "name": currentBankName }];
      if (this.props.moneyType === "get") {
        this.setState({
          inBank: currentBankCode,
          outBank: agentBankCode,
          agentBankCode: agentBankCode,
          agentBankName: bankName(agentBankCode),
          toAgentArr: zzArr,
        });
      } else if (this.props.moneyType === "pay") {
        this.setState({
          inBank: agentBankCode,
          outBank: currentBankCode,
          agentBankCode: agentBankCode,
          agentBankName: bankName(agentBankCode),
          toAgentArr: zzArr,
        });
      }
    }

    if (this.props.modalType === "edit") {
      this.getTaskInfo();
    } else {
      this.getPbankValuta(); // 获取币值表
    }
  }
  // 获取任务信息
  getTaskInfo = () => {
    console.log(this.props.modalCode);
    Request.GET(`/api/api/task/get/${this.props.modalCode}`).then((res) => {
      if (res.success) {
        this.setState({
          valutaList: res.data.taskValutaList,
          inBank: res.data.task.inBank,
          note: res.data.task.note,
          outBank: res.data.task.outBank,
          taskTime: moment(res.data.task.taskTime),
          id: res.data.task.id,
          taskCode: res.data.task.taskCode,
        });
      } else {
        Notification.warning({
          message: res.message || "获取该任务的调款信息失败",
        });
      }
    });
  }
  // 获取被代理银行列表
  getAgentArr = () => {
    Request.GET(`/api/api/bank/agent?agentBankCode=${currentBankCode}`).then((res) => {
      if (res.success) {
        this.setState({
          toAgentArr: res.data,
        });
      } else {
        Notification.warning({
          message: res.message || "获取被代理银行信息失败",
        });
      }
    });
  };
  // 获取币值表
  getPbankValuta = () => {
    Request.GET("/api/api/valuta/list").then((res) => {
      if (res.success) {
        this.setState({
          valutaList: res.data.map(item => {
            item.valutaAmount = 0;
            return item;
          }),
          // inBank: "",
          // outBank: "",
          // taskTime: null,
          // id: "",
          // taskCode: "",
        });
      } else {
        Notification.warning({
          message: res.message || "获取币值列表失败",
        });
      }
    });
  };
  disabledDate = (current) => {
    // Can not select days before today and today
    return current && current < moment().endOf("day");
  }
  changePbankValutaList = (value, record) => {
    if (!value || moneyReg.test(value)) {
      this.setState({
        valutaList: this.state.valutaList.map(item => {
          if (item.code === record.code) {
            item.valutaAmount = value;
          }
          return item;
        })
      })
    } else {
      Notification.warning({
        message: "请输入合法数值！",
      });
    }
  }
  compute = () => this.state.valutaList.reduce((total, item) => np.plus(total, item.valutaAmount), 0);
  slCompute = () => {
    return this.state.valutaList.reduce((total, item) => {
      if (item.flag === 1) {
        return np.plus(total, item.valutaAmount);
      }
      return total;
    }, 0);
  };
  fslCompute = () => {
    return this.state.valutaList.reduce((total, item) => {
      if (item.flag === 0) {
        return np.plus(total, item.valutaAmount);
      }
      return total;
    }, 0);
  };
  handleSubmit = () => {
    if (this.compute() === 0 || this.compute() < 0) {
      Notification.warning({
        message: "调款金额不能小于等于0元！",
      });
      this.setState({
        sureBtn: false
      });
      return;
    }
    const { id, taskCode } = this.state;
    const { form: { validateFields }, modalType } = this.props;
    validateFields((err, values) => {
      if (!err) {
        if (modalType === "edit") {
          Request.POST("/api/api/task/update", {
            body: {
              task: {
                id,
                taskCode,
                inBank: values.inBank,
                inBankName: bankName(values.inBank),
                outBank: values.outBank,
                outBankName: bankName(values.outBank),
                taskTime: values.taskTime.format(dateFormat),
                taskType: 2,
                remark: values.remark
              },
              taskValutaList: values.taskValutaList.valuta.filter(item => item.valutaAmount > 0).map(item => {
                let temp = {};
                temp.valutaCode = item.code;
                temp.valutaFlag = item.flag;
                temp.valutaAmount = item.valutaAmount;
                return temp;
              })
            }
          }).then((res) => {
            if (res.success) {
              Notification.success({
                message: res.message || "修改调款任务成功",
              });
              this.props.parentThis.CancelTaskModal();
              this.props.parentThis.loadData();
            } else {
              Notification.warning({
                message: res.message || "修改调款任务成功失败",
              });
            }
            this.setState({
              sureBtn: false
            });
          });
        } else {
          Request.POST("/api/api/task/add", {
            params: {
              loginKey: "b02a523f8ec348feb30aac2ea794724c",
            },
            body: {
              task: {
                inBank: values.inBank,
                inBankName: bankName(values.inBank),
                outBank: values.outBank,
                outBankName: bankName(values.outBank),
                taskTime: values.taskTime.format(dateFormat),
                taskType: 2, //1：跨行调款 2：代理任务 3：向人行交款 4：从人行取款 5：上缴残损券
                remark: values.remark
              },
              taskValutaList: values.taskValutaList.valuta.filter(item => item.valutaAmount > 0).map(item => {
                let temp = {};
                temp.valutaCode = item.code;
                temp.valutaFlag = item.flag;
                temp.valutaAmount = item.valutaAmount;
                return temp;
              })
            }
          }).then((res) => {
            if (res.success) {
              Notification.success({
                message: res.message || "创建调款任务成功",
              });
              this.props.parentThis.CancelTaskModal();
              this.props.parentThis.loadData();
            } else {
              Notification.warning({
                message: res.message || "创建调款任务成功失败",
              });
            }
            this.setState({
              sureBtn: false
            });
          });
        }
      }
    });
  };
  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const { sureBtn, toAgentArr, agentBankCode, agentBankName, valutaList, inBank, outBank, taskTime, remark } = this.state;
    const { modalType, moneyType } = this.props;
    console.log(toAgentArr);
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 16 },
    };
    const formItemLayoutValuta = {
      labelCol: { span: 3 },
      wrapperCol: { span: 20 },
    }
    const _this = this;
    return (
      <Row className="modalForm">
        <Col>
          <Form>
            <FormItem label="时间"
              {...formItemLayout}>
              {getFieldDecorator("taskTime", {
                initialValue: taskTime,
                rules: [{ required: true, message: "请输入调款时间!" }],
              })(
                <DatePicker
                  allowClear={!1}
                  disabledDate={this.disabledDate}
                  showTime={{ format: "HH:mm" }}
                  format="YYYY-MM-DD HH:mm"
                  placeholder="请选择调款任务时间"
                />
              )}
            </FormItem>
            <FormItem label="出库行"
              {...formItemLayout}>
              {getFieldDecorator("outBank", {
                initialValue: outBank,
                rules: [{ required: true, message: "请输入调款出库行!" }, {
                  validator: (rule, value, callback) => {
                    if (getFieldValue("inBank") === value) {
                      callback("出库行和入库行不能为同一银行！");
                    }
                    callback();
                  }
                }],
              })(
                <Select
                  showSearch
                  placeholder="请选择出库行"
                  disabled={agentType === 2 || modalType === "edit"}
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.indexOf(input) >= 0
                  }
                >
                  {
                    moneyType === "get" ?
                      <Select.Option
                        value={agentBankCode}
                      >
                        {agentBankName}
                      </Select.Option> :
                      toAgentArr.map(item => {
                        return <Select.Option
                          value={item.code}
                          key={item.id}
                        >
                          {item.name}
                        </Select.Option>
                      })
                  }
                </Select>
              )}
            </FormItem>
            <FormItem label="入库行"
              {...formItemLayout}>
              {getFieldDecorator("inBank", {
                initialValue: inBank,
                rules: [
                  { required: true, message: "请输入调款入库行!" }, {
                    validator: (rule, value, callback) => {
                      if (getFieldValue("outBank") === value) {
                        callback("出库行和入库行不能为同一银行！");
                      }
                      callback();
                    }
                  }],
              })(
                <Select
                  showSearch
                  disabled={agentType === 2 || modalType === "edit"}
                  placeholder="请选择入库行"
                  optionFilterProp="children"
                  filterOption={(input, option) =>
                    option.props.children.indexOf(input) >= 0
                  }
                >
                  {
                    moneyType === "pay" ?
                      <Select.Option
                        value={agentBankCode}
                      >
                        {agentBankName}
                      </Select.Option> :
                      toAgentArr.map(item => {
                        return <Select.Option
                          value={item.code}
                          key={item.id}
                        >
                          {item.name}
                        </Select.Option>
                      })
                  }
                </Select>
              )}
            </FormItem>
            <FormItem label="币值"
              {...formItemLayoutValuta}>
              {getFieldDecorator("taskValutaList", {
                initialValue: {
                  valuta: valutaList
                }
              })(
                <ValutaForm
                  getFieldDecorator={getFieldDecorator}
                  changePbankValutaList={this.changePbankValutaList}
                  parentThis={this}
                />
              )}
            </FormItem>
            <FormItem label="备注说明"
              {...formItemLayout}>
              {getFieldDecorator("remark", {
                initialValue: remark,
                rules: [{
                  required: false,
                  message: "请填写备注说明",
                }],
              })(
                <Input.TextArea placeholder="请填写备注说明" />
              )}
            </FormItem>
          </Form>
        </Col>
        <Col style={{ "textAlign": "right" }}>
          <Button type="primary"
            htmlType="submit"
            disabled={sureBtn}
            onClick={() => {
              this.setState({
                sureBtn: true,
              }, ()=> {
                // 解决一下setState异步问题
                setTimeout(() => {
                  _this.handleSubmit();
                }, 500);
              });
            }}>确定</Button>
          <Button style={{ "marginLeft": 8 }}
            onClick={() => {
              this.props.parentThis.CancelTaskModal();
            }}>取消</Button>
        </Col>
      </Row>
    );
  }
}

const View = Form.create()(ViewForm);
export default View;