Question

我在使用create-react-app创建的项目中使用react-16，并使用提供样式的vanilla bootstrap 4库（无组件）。

有人可以指向一个工作示例，按下按钮我可以打开一个用引导程序设置的模态对话框吗？

提前致谢。

Answer 1

我有一个使用bootstrap的进度的代码，虽然我没有使用bootstrap来设置我的模态......我实际上在项目的其余部分使用它，它是：https://codepen.io/manAbl/pen/eKYVpL?editors=1010

我正在用我的<div id="modal-root"></div>

创建模态的实例

我正在创建一个与我的class Modal类似的井状态树保持连接的门户网站：

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    modalRoot.appendChild(this.el);
  }

  componentWillUnmount() {
     modalRoot.removeChild(this.el);
  }

  render() {
     return ReactDOM.createPortal(
       this.props.children,
       this.el,
    );
  }
}

并根据状态渲染模态：

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

  handleModalVisibility() {
    this.setState({ showModal: !this.state.showModal });
  }
  render() {
    const { showModal } = this.state;

    return (
      <div className="container app-wrapper">
        <ListContainer/>
        <Button onClick={this.handleModalVisibility} title='Add Recipe' />
          { this.state.showModal ? (
          <Modal>
            <InputAddRecipe onClick={this.handleModalVisibility} />
          </Modal> ) : null }
      </div>
    )
  }
}

希望有帮助：）

如何使用bootstrap在React中显示模式对话框

1 个答案: