我不明白 closeButton 属性在 React Bootstrap 模态中的作用

Question

我正在尝试使用 React Bootstrap Modal 向我的 webapp 添加一个模态，我正在努力了解

<Modal.Header>

的 closeButton 的属性，这就是我如何设置我的模态

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

在构造函数中显示状态设置为 false

this.state = {
    show: false
}

这是一个类的所有部分，我使用这种方法展示模态

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

我真的很难理解该怎么做，如果你愿意为我指明正确的方向，我将非常感激。

我已经尝试像文档中那样实现一个方法

handleClose

但那是在函数情况下，我正在用一个类实现它

Answer 1

closeButton 是一个布尔值，它指定

ModalHeader Component should contain a close button

与否。单击此按钮时，它将

fire an onHide function in the modal component

.

<Modal.Header closeButton>

=====> 将在模型标题中添加一个关闭按钮

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

=====>点击上面的按钮将触发隐藏功能

这是一个演示，它如何使用您的代码工作：

import React from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }
  handleShow() {
    this.setState({ show: !this.state.show });
  }
  handleClose() {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <Modal show={this.state.show} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Aggiungi un conto corrente</Modal.Title>
          </Modal.Header>
          <Modal.Body> kjkjqskjqjkkjqkjksqkj</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary">Annulla</Button>
            <Button varian="primary">Salva</Button>
          </Modal.Footer>
        </Modal>
        <button type="text" onClick={this.handleShow}>
          {" "}
          open modal
        </button>
      </div>
    );
  }
}

export default App;