Question

我正在尝试在我的reactJs项目中显示引导程序模式。我在地图功能中显示具有不同ID和不同内容的按钮。我希望每个模式内容都对应于单击的按钮的ID。我正在遵循此示例-https://react-bootstrap.github.io/components/modal/，但是无法在此处指定ID。

我该如何解决？

Answer 1

在按钮处，您可以将内容传递给onClick并将其设置为状态

handleShow = (data) => {
    this.setState({ show: true, title: data.title });
  }
render() {
return (
<div>
{
listData.map((data, index) => {
   return (
       <Button key={index} bsStyle="primary" bsSize="large" onClick={() => this.handleShow(data)}>
          Launch demo modal
       </Button>
   );
})
}
</div>
<Modal show={this.state.show} onHide={this.handleClose}>
    <Modal.Body>
        {this.state.title}
    </Modal.Body>
</Modal>

在reactJs中显示引导程序模态

1 个答案: