如何从另一个类中定义的按钮打开或关闭一个类中定义的模态

Question

我正在用 React 和 react-bootstrap 编写一个简单的 webapp。我有两个按钮应该打开两个不同的模态。我想将包含按钮的类与两个模态类分开，例如

var React = require('react');
var ReactDOM = require('react-dom');

import { Button, Modal, closeButton } from 'react-bootstrap';

var Jumbo = React.createClass ({
  render() {
    return (
      <div className="container">
        <Button onClick={Modal1.open}>Modal1</Button>
        <Button onClick={Modal2.open}>Modal2</Button>
        <Modal1 />
        <Modal2 />
      </div>
    );
  }
});

var Modal1 = React.createClass ({
  getInitialState() {
    return {
      showModal: false
    };
  },

  close() {
    this.setState({
      showModal: false
    });
  },

  open() {
    this.setState({
      showModal: true
    });
  },

  render() {
    return (
      <Modal show={this.state.showModal} onHide={this.close}>
        <Modal.Header closeButton>
          <Modal.Title>Modal1</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Modal1</p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.close}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
});

var Modal2 = React.createClass ({
  getInitialState() {
    return {
      showModal: false
    };
  },

  close() {
    this.setState({
      showModal: false
    });
  },

  open() {
    this.setState({
      showModal: true
    });
  },

  render() {
    return (
      <Modal show={this.state.showModal} onHide={this.close}>
        <Modal.Header closeButton>
          <Modal.Title>Modal2</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>Modal2</p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={this.close}>Close</Button>
        </Modal.Footer>
      </Modal>
    );
  }
});

ReactDOM.render(<Jumbo />, document.getElementById('modal'));

但是onClick={ModalN.open} 不起作用。通常我会将按钮放在模态类中（根据the documented example）并执行onClick={this.open}，但我想将两个按钮元素放在一起，而不是单独的<div>s。传递对 Modal 的引用的正确方法是什么？

Answer 1

onClick={modalN.open} 不起作用，您需要在Jumbo 中包含ModalN 组件：

var Jumbo = React.createClass ({
  getInitialState() {
    return {
      activeModal: null
    }
  },

  openModal(id){
     this.setState({
        activeModal: id
     })
  }

  render() {
    return (
      <div className="container">
        <Button onClick={this.openModal.bind(this,1)}>Modal1</Button>
        <Button onClick={this.openModal.bind(this,2)}>Modal2</Button>
        {this.state.activeModal === 1 ? <Modal1 /> :null}
        {this.state.activeModal === 2? <Modal2 /> : null}
      </div>
    );
  }
});

您还需要将每个 Modal 的初始 showModal 更改为 true，否则它们将永远不会显示（因为从未调用过 open()）：

var Modal1 = React.createClass ({
  getInitialState() {
    return {
      showModal: true
    }
  },
  ...
});