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;

 

热门文章

暂无图片
编程学习 ·

Vue

常用指令文本插值 v-html:把文本解析为 HTML 代码。 绑定属性 v-bind:为 HTML 标签绑定属性值。 条件渲染v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。 v-else:条件性的渲染。 v-else-if:条件性的渲染。 v-show:根据条件展示某元素,区别在于切换的是 display …
暂无图片
编程学习 ·

Spring Boot 整合 Redis

Redis 基于内存进行存储,支持key-value的存储形式,底层是C 基于key-value形式的数据字典,没有数据表的概念,直接用键值对的形式完成数据管理 支持五种数据类型:字符串列表集合有序集合哈希安装Redis 1.下载Redis:https://redis.io/download 2.解压并在本地硬盘人任意位置…
暂无图片
编程学习 ·

移动开发笔记(四)UI

1.常见控件 属性match_parent 当前控件大小和父布局的大小一样wrap_content 控件的大小能刚好包含里面的内容dp是一种屏幕密度无关的尺寸单位文字大小要使用sp作为单位,用户修改完文字尺寸后,文字大小也会跟着变化 1.1TextView android:gravity来指定文字对齐方式,可选值有…
暂无图片
编程学习 ·

【数据结构与算法】排序算法之冒泡排序(C++、Python)

原理介绍: 假设有长度为n的数组a,按照从小到大的顺序进行排序。冒泡排序的思路为:首先从数组的第一个元素开始,对数组中相邻的两个元素进行比较大小。如果左边(即索引数字小的)元素的值大于右边的元素,则交换这两个元素在数组中的位置,一直到最后一个元素为止。此时数组…
暂无图片
编程学习 ·

Struts2远程代码执行漏洞复现

环境搭建docker pull medicean/vulapps:s_struts2_s2-029docker run -d -p 80:8080 medicean/vulapps:s_struts2_s2-029http://yourIP/default.action打开页面漏洞利用(%23_memberAccess[allowPrivateAccess]=true,%23_memberAccess[allowProtectedAccess]=true,%23_memberAcce…
暂无图片
编程学习 ·

Video Summarization with Long Short-Term Memory论文翻译

基于长短期记忆网络的视频摘要 文章目录基于长短期记忆网络的视频摘要Abstract1 introduction2 Related Work3 Approach3.1 Problem Statement3.2 Long Short-Term Memory (LSTM)3.3 vsLSTM for Video Summarization3.4 Enhancing vsLSTM by Modeling Pairwise Repulsiveness3…
暂无图片
编程学习 ·

新能源汽车车载智能终端T-BOX

新能源汽车车载智能终端T-BOX技术解决方案包括:用户端 + 运营后台系统 + 车辆网平台 + 车载终端等总体架构:“端+网”解决方案智能信TBOX终端硬件,TBOX终端与汽车共享、网约及分时租赁商业应用相结合,实现远程开锁,GPS追踪、动力控制管理、闪灯鸣笛寻车等功能。同时,提供…
暂无图片
编程学习 ·

01:渗透测试及Kali Linux介绍

文章目录kali linux 渗透测试介绍安全问题的根源安全目标渗透测试渗透测试标准渗透测试项目渗透测试误区KALIKALI LINUX 策略 kali linux 渗透测试 介绍 安全问题的根源分层思想的优劣OSI采用了分层的结构化技术,共分七层,物理层、数据链路层、网络层、传输层、会话层、表示层…
暂无图片
编程学习 ·

第一次用IDEA创建maven工程时间

第一次在idea中创建maven工程花费20+min 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与…
暂无图片
编程学习 ·

centos 怎么安装 nginx

linux centos 7 安装 nginx 原文来自官网 : http://nginx.org/en/linux_packages.html Installation instructions Before you install nginx for the first time on a new machine, you need to set up the nginx packages repository. Afterward, you can install and updat…
暂无图片
编程学习 ·

“/“和 “\“以及“//“和“\\“有什么区别?

大家在学习生活中对于斜杠肯定不会陌生,不管在网址或者地址都会接触到这些东西,这几天刚好抽出一段时间来给大家讲解一下,有什么问题遗漏大家多多指正!!"/"正斜杠表示除法,分割;在windows系统中常用来分割“命令行参数”;正斜杠还表示虚拟路径,比如网址。&q…
暂无图片
编程学习 ·

mongodb编译安装

CentOS7 编译安装 Mongodb (实测 笔记 Centos 7.0 + Mongodb 2.6.6) 环境:系统硬件:vmware vsphere (CPU:2*4核,内存2G,双网卡)系统版本:CentOS-7.0-1406-x86_64-DVD.iso安装步骤:1.准备1.1 显示系统版本 [root@centos ~]# cat /etc/redhat-release CentOS Linux releas…
暂无图片
编程学习 ·

LeetCode 535. TinyURL 的加密与解密

目录结构1.题目2.题解1.题目TinyURL是一种URL简化服务, 比如:当你输入一个URL https://leetcode.com/problems/design-tinyurl 时,它将返回一个简化的URL http://tinyurl.com/4e9iAk.要求:设计一个 TinyURL 的加密 encode 和解密 decode 的方法。你的加密和解密算法如何设计…
暂无图片
编程学习 ·

企业实战--kubernetes(九)---存储(Secret)

一、Secret简介 Secret对象类型用来保存敏感信息,例如密码、OAuth令牌和ssh key。 敏感信息放在Secret中比放在Pod的定义或者容器镜像中来说更加安全和灵活。 Pod可以用两种方式来使用Secret: 作为volume中的文件被挂载到pod中的一个或多个容器中。 当kubelet为pod拉取镜像时…
暂无图片
编程学习 ·

【解惑】到底是“时间片“?还是“分时轮询“?

1、任务调度任务调度对于电子类或者自动化类专业小伙伴最早接触一般都是在接触RTOS后了,然而对于计算机相关专业的小伙伴应该在学《计算机操作系统》老师对这一块讲解的非常清楚了,包括一些性能指标的定义与计算等等,不过作者这里仅仅只针对RTOS进行讲解,大家感兴趣可以找一…