javascript - react 组件中的多个模态

Question

我正在为不同的产品做映射，每个产品都有一个“报告”按钮。按下按钮后，会弹出一个模式并显示产品的相关详细信息。但是当我点击任何一个“报告”按钮时，所有其他模式都会被触发。我没有检索到正确的详细信息。它应该只在我点击的那个特定产品上。我试过在这里研究并发现了类似的问题，但似乎仍然无法理解。有人能帮我吗？这是我的代码 https://codesandbox.io/s/small-wildflower-o3vfy

这是我的状态数组:

    this.state = {
  reportModalShow: [false, false],
};
 let reportModalClose = (key) => {
  this.state.reportModalShow[key] = false;
};
  {this.props.custOrders.map((custOrder, key) => {
      return (
              
                  <Button
                    variant="danger"
                    style={{ marginLeft: 5 }}
                    onClick={() => {
                      console.log("Report Button Clicked");
                      let tmp = this.state.reportModalShow;
                      tmp[key] = !tmp[key];
                      this.setState({ reportModalShow: tmp });
                    }}
                  >
                    Report
                  </Button>
                  <ReportModal
                    show={this.state.reportModalShow[key]}
                    key={key}
                    onHide={reportModalClose}
                    order={custOrder}
                    orders={this.props.custOrders}
                    orderItems={this.props.custOrderItems}
                  />
                </ButtonToolbar>

这是我的模式:

  <Modal
    show={this.props.show}
    size="lg"
    aria-labelledby="contained-modal-title-vcenter"
    centered
  >
    <Modal.Header closeButton onClick={this.props.onHide}>
      <Modal.Title id="contained-modal-title-vcenter">
        Report an Issue
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <FormControl component="fieldset" style={{ marginTop: 10 }}>
        {/* <FormLabel component="legend">Issue Type </FormLabel> */}
        <RadioGroup
          aria-label="account"
          name="account1"
          value={this.state.issueType}
          onChange={this.handleChange}
        >
          <FormControlLabel
            value="missingItem"
            control={<Radio />}
            label="Missing Items"
          />
          <FormControlLabel
            value="incorrectOrder"
            control={<Radio />}
            label="Incorrect Order"
          />
      
          />
        </RadioGroup>
      </FormControl>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="danger"   onClick={this.props.onHide(this.props.key)}>
        Cancel
      </Button>
      <Button onClick={this.report}>Report</Button>
    </Modal.Footer>
  </Modal>

Answer 1

您应该更改代码的某些部分。首先，当用户点击 cancel 或 close 按钮时，您需要使用 index.html 更改当前模态的状态。这可以通过 reportModalShow 的浅拷贝来完成:

  reportModalClose = (event, key) => {
    let reportModalShow = [...this.state.reportModalShow];
    reportModalShow[key] = false;
    this.setState({ ...this.state, reportModalShow }, () => {
      console.log(this.state);
    });
  };

同样在 ReportModal 的 onHide 事件中，您没有发送当前模态的索引参数。所以你需要把它改成:

onHide={(e) => {
     this.reportModalClose(e, key);
}}

最后，将Modal.jsx中关闭和取消按钮的onClick事件修改为:

onClick={(event) => this.props.onHide(event)}