如何從另一個類中定義的按鈕打開或關閉一個類中定義的模態

Question

我正在用React和react-bootstrap編寫一個簡單的webapp。我有兩個按鈕應該打開兩個不同的Modals。我想從兩個模態類中分離包含按鈕的類，例如

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}，但我想將兩個Button元素放在一起，而不是單獨的<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> 
    ); 
    } 
}); 

您還需要各模態的INTIAL showModal改變true，否則他們永遠不會顯示（因爲open()從未被稱爲）：

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