열기 모달에서 클릭 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 

나는 이것이 심판을 사용하고 모달의 상태를 변화시킬 수 있다고 읽었습니다. 여기 정확히 내가 뭘 잘못하고 있니?

감사합니다. 당신이 당신의 모달 구성 요소의 사용을 호출 할 때 ref 속성을 다음 위의 코드처럼 호출 할 수 있습니다

Answer 1

당신은 부모

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

코드 아래에 시도 할 수 있습니다.

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