React Bootstrap Modal组件closeButton属性类组件使用疑问

核心逻辑 #

给<Modal.Header>添加closeButton属性后，组件会自动渲染一个关闭按钮，但这个按钮不会直接触发关闭——你需要给外层的<Modal>组件绑定onHide事件，这个事件会在点击closeButton、点击模态框遮罩层或者按ESC键时触发，用来更新show状态完成关闭。

具体实现步骤 #

1. 新增关闭状态的方法
   在类组件里添加handleClose方法，负责将show状态设为false：

// 推荐用箭头函数自动绑定this，无需手动处理
handleClose = () => {
  this.setState({ show: false });
};

// 也可以在构造函数里手动绑定（二选一即可）
constructor(props) {
  super(props);
  this.state = { show: false };
  this.handleClose = this.handleClose.bind(this);
  this.showModalAdd = this.showModalAdd.bind(this);
}

2. 给Modal组件绑定onHide事件
   修改<Modal>标签，添加onHide={this.handleClose}，这样Header的关闭按钮点击后会自动调用关闭方法：

<Modal show={this.state.show} onHide={this.handleClose}>

3. 修复按钮拼写错误+绑定取消按钮事件
   你代码里的"Salva"按钮有拼写错误：varian应改为variant；同时给"Annulla"按钮绑定handleClose，实现点击取消关闭模态框：

<Modal.Footer>
  <Button variant="secondary" onClick={this.handleClose}>
    Annulla
  </Button>
  <Button variant="primary">
    Salva
  </Button>
</Modal.Footer>

完整修改后的代码 #

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    // 若不用箭头函数定义方法，需手动bind this
    this.showModalAdd = this.showModalAdd.bind(this);
  }

  showModalAdd() {
    this.setState({ show: true });
  }

  handleClose = () => {
    this.setState({ show: false });
  };

  render() {
    return (
      <>
        {/* 这里是触发模态框的按钮示例 */}
        <Button onClick={this.showModalAdd}>打开模态框</Button>

        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Aggiungi un conto corrente</Modal.Title>
          </Modal.Header>
          <Modal.Body></Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={this.handleClose}>
              Annulla
            </Button>
            <Button variant="primary">
              Salva
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
}

完成以上设置后，点击Header的关闭按钮、模态框背景、ESC键，或者Footer的Annulla按钮，都能正常关闭模态框。

内容的提问来源于stack exchange，提问作者Bogghi