关闭通过反应表弹出的模式

Question

我通过在表中单击按钮来弹出模式编辑数据。

当我尝试关闭模式后执行该功能后，它将导航至空白页面。我从子组件中调用父组件中的模态，如下所述。

<EditCardModal
          show={this.state.show}
          onHide={this.closeModal}
          title="EDIT CARD"
          id={this.state.id}
          name={this.state.name}
          uid={this.state.uid}
          status={this.state.status}
          serial={this.state.serial}
          nodeType={this.state.nodeType}
          onChange={this.handleChange}
          handleEdit={this.handleEdit}
          msg={this.state.msg}
        />

在子组件中，将关闭按钮添加到模态标题，如下所示。

 <Modal.Header closeButton>
          <Modal.Title>{this.props.title}</Modal.Title>
 </Modal.Header>

下面的方法显示了我如何关闭模态。

closeModal = async event => {
    event.preventDefault();
    await this.setState({
      show: false
    });
  };

TableList.js

class TableList extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.nodeCreationData = {};

    this.state = {
      show: false,
      excelData: null,
      rowInfo: null,
      name: "",
      uid: "",
      order: "",
      serial: "",
      status: "",
      excelDataValidation: false,
      nodeType: "",
      isSuccess: false,
      a: null,
      msg: "",
      title: ""
    };
    this.showModal = this.showModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  showModal() {
    // event.preventDefault();
    this.setState({
      show: true
    });
  }

  closeModal() {
    // event.preventDefault();
    debugger;
    this.setState({
      show: false
    });
  }

  componentWillMount() {
    this.props.queryStart();
    this.props.getCard();
  }

  getTdProps = (state, rowInfo, column, instance) => {
    return {
      onClick: async (e, handleOriginal) => {
        console.log("It was in this row:", rowInfo.original.name);

        await this.setState({
          id: rowInfo.original.id,
          name: rowInfo.original.name,
          uid: rowInfo.original.uid,
          serial: rowInfo.original.serial,
          status: rowInfo.original.status,
          nodeType: rowInfo.original.nodeType
        });

        if (handleOriginal) {
          handleOriginal();
        }
        console.log("State", this.state);
      }
    };
  };

  tableHeaders = [
    {
      Header: "ID",
      accessor: "id"
    },

    {
      Header: "NAME",
      accessor: "name"
    },
    {
      Header: "UID",
      accessor: "uid"
    },
    {
      Header: "STATUS",
      accessor: "status"
    },
    {
      Header: "SERIAL",
      accessor: "serial"
    },

    {
      Header: "UPDATED_AT",
      accessor: "updatedAt"
    },

    {
      Header: "NODE TYPE",
      accessor: "nodeType"
    },
    {
      Header: "ACTION",
      accessor: "action",
      minWidth: 150,
      Cell: ({ row }) => (
        <div>
          <Button type="submit" onClick={this.showModal}>
            UPDATE CARD
          </Button>
        </div>
      )
    }
  ];

  handleEdit = () => {
    this.props.editCard({
      id: this.state.id,
      createdAt: this.state.createdAt,
      name: this.state.name,
      uid: this.state.uid,
      serial: this.state.serial,
      name: this.state.name,
      status: this.state.status,
      nodeType: this.state.nodeType
    });
  };

  handleChange = event => {
    if (event.target.name == "id") {
      this.setState({
        id: event.target.value
      });
    }

    if (event.target.name == "nodeType") {
      this.setState({
        nodeType: event.target.value
      });
    }

    if (event.target.name == "name") {
      this.setState({
        name: event.target.value
      });
    }
    if (event.target.name == "serial") {
      this.setState({
        serail: event.target.value
      });
    }
    if (event.target.name == "uid") {
      this.setState({
        uid: event.target.value
      });
    }
    if (event.target.name == "status") {
      this.setState({
        status: event.target.value
      });
    }
  };

  render() {
    const { TableListData, TableListLoading } = this.props;

    var nodeTableList = null;
    if (TableListData == null) {
      nodeTableList = "No data";
    } else {
      nodeTableList = (
        <ReactTable
          // ref={r => {
          //   this.reactTable = r;
          // }}
          data={TableListData[0]}
          columns={this.tableHeaders}
          getTdProps={this.getTdProps}
        />
      );
    }

    let loadingMsg = TableListLoading && <Alert>Loading</Alert>; //Show loading message

    return (
      <Grid fluid>
        <EditCardModal
          show={this.state.show}
          onHide={this.closeModal}
          title="EDIT CARD"
          id={this.state.id}
          name={this.state.name}
          uid={this.state.uid}
          status={this.state.status}
          serial={this.state.serial}
          nodeType={this.state.nodeType}
          onChange={this.handleChange}
          handleEdit={this.handleEdit}
          msg={this.state.msg}
        />

        <Row>
          <Col xs={12} md={12}>
            {loadingMsg}
            {nodeTableList}
          </Col>
        </Row>
      </Grid>
    );
  }
}

function mapStateToProps(state) {
  return {
    TableListData: state.cardUploader.data
  };
}

export default withRouter(
  connect(
    mapStateToProps,
    cardUploaderActions
  )(TableList)
);

有人可以帮我解决这个问题吗？