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

我正在用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參考的正確方法是什麼？

來源

2016-07-07 Frangipanes

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 
    } 
    }, 
    ... 
});

來源

2016-07-07 11:23:18

謝謝！在你的回答中有一些拼寫錯誤，但這使我走上了正確的軌道。爲了使用上面的代碼，每個Modal的'getInitialState（）'函數需要返回'showModal：true'，或者當三元運算符激活''元素時，它們仍然隱藏。爲了防止錯誤，我還必須在'Jumbo'類中添加'getInitialState（）'來設置'activeModal：null'（或'0'，我認爲它不重要）。 – Frangipanes

很抱歉，已經接受並很快接受此答案。我發現了一個錯誤 - 當我點擊按鈕打開Modal1，然後關閉Modal時，我不能再次按下同樣的按鈕打開Modal1。唯一的方法是點擊'Modal2'按鈕，關閉它，然後再次點擊'Modal1'按鈕。有沒有辦法解決這個問題？ – Frangipanes

我解決了它！從[React討論區]（https://discuss.reactjs.org/t/is-this-a-decent-pattern-to-update-parent-state-from-children/560），我瞭解到你可以通過在作爲來自父母 - >孩子的財產的功能中。只需在'Jumbo'中添加一個'close（）'方法，將'activeModal'設置爲'null'，並以''的形式傳遞它，然後在Modal Classes中將它作爲'{this.props.close}'（例如'onHide ='，'onClick = {this.props.close}'。你不需要使用'getInitialState（）'，'open（）'和'close （）'功能，我編輯了答案以反映它 – Frangipanes

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

回答

相關問題