オープンモーダルは、中クリックjsの反応

Question

私はの基本的なコンポーネントのモーダル・コンポーネントを使用しています反応 - https://github.com/reactjs/react-modal

私は何を達成しようとしていますが、私は輸入モーダルを持つ別の親からのモーダルを開きたいということです。

Parent.js 
<button onClick={() => this.refs.setState({modalIsOpen: true})}> - THIS BUTTON ELEMENT IS IN ANOTHER COMPONENT 

Modal.js 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Modal from 'react-modal'; 

const customStyles = { 
content : { 
top     : '50%', 
left     : '50%', 
right     : 'auto', 
bottom    : 'auto', 
marginRight   : '-50%', 
transform    : 'translate(-50%, -50%)' 
} 
}; 

class App extends React.Component { 
constructor() { 
super(); 

this.state = { 
    modalIsOpen: false 
}; 

this.openModal = this.openModal.bind(this); 
this.afterOpenModal = this.afterOpenModal.bind(this); 
this.closeModal = this.closeModal.bind(this); 
} 

openModal() { 
this.setState({modalIsOpen: true}); 
} 

afterOpenModal() { 
// references are now sync'd and can be accessed. 
this.subtitle.style.color = '#f00'; 
} 

closeModal() { 
this.setState({modalIsOpen: false}); 
} 

render() { 
return (
    <div> 
    <button onClick={this.openModal}>Open Modal</button> 
    <Modal 
     isOpen={this.state.modalIsOpen} 
     onAfterOpen={this.afterOpenModal} 
     onRequestClose={this.closeModal} 
     style={customStyles} 
     contentLabel="Example Modal" 
    > 

     <h2 ref={subtitle => this.subtitle = subtitle}>Hello</h2> 
     <button onClick={this.closeModal}>close</button> 
     <div>I am a modal</div> 
     <form> 
     <input /> 
     <button>tab navigation</button> 
     <button>stays</button> 
     <button>inside</button> 
     <button>the modal</button> 
     </form> 
    </Modal> 
    </div> 
); 
} 
} 

export default App 

これは、参照を使用してモーダルの状態を変更することができます。私はここで間違って何をしているのですか？

ありがとうございます！

Answer 1

は、あなたがあなたのモーダルコンポーネントの使用ref属性を呼び出すときに、コード上記のように呼び出すことができます

<button onClick={() => this._modal.openModal()}>click</button> 

親にコードの下に試すことができます。

<Modal ref={(modal) => { this._modal = modal; }} />