Question

我在使用react-bootstrap Modal时遇到一些问题，这些问题并没有显示出来。

这是模态的代码。 showModal和hideModal函数是有原因的，将showModal布尔值分别设置为true和false。

我的文件顶部有import { Button, Modal } from 'react-bootstrap。

有人可以帮我吗？

TIA

<Modal show={this.state.showModal} onHide={(e)=> this.hideModal(e)}>
    <Modal.Header closeButton>
        <Modal.Title>Translations</Modal.Title>
    </Modal.Header>
    <Modal.Body>
        <h4>Filter:</h4>
        <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
        <hr />
    </Modal.Body>
    <Modal.Footer>
        <Button onClick={(e)=> this.hideModal(e)}>Close</Button>
    </Modal.Footer>
</Modal>

<Button className="btn btn-primary m-1" onClick={(e)=> { this.showModal(e) }}>
    See modal
</Button>

Answer 1

show道具接受布尔值。当true时将显示模式。因此，在处理程序内部，您需要设置状态true/false。

您可以在此处查看正在运行的 stackblitz 演示。

代码段

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Button, Modal } from 'react-bootstrap';

//Presentational Components MyModel
const MyModel = (props) => (<Modal show={props.isHidden} onHide={props.onClose}>
  <Modal.Header closeButton>
    <Modal.Title>Translations</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <h4>Filter:</h4>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
    <hr />
  </Modal.Body>
  <Modal.Footer>
    <Button onClick={props.onClose}>Close</Button>
  </Modal.Footer>
</Modal>);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
  }

  showModal = (e) => {
    this.setState({ showModal: true })
  }

  hideModal = (e) => {
    this.setState({ showModal: false })
  }

  render() {
    return (
      <div>
        <MyModel isHidden={this.state.showModal} onClose={this.hideModal} />
        <Button className="btn btn-primary m-1" onClick={this.showModal}>Show modal</Button>
      </div>
    );
  }
}
render(<App />, document.getElementById('root'));

React-Boostrap Modal没有显示

1 个答案: