0
내가의 기본 구성 요소 모달 구성 요소를 사용하고 반응 - https://github.com/reactjs/react-modal열기 모달에서 클릭 JS 반응
무엇을 달성하려고하는 것은 내가 가져온 모달있는 다른 부모로부터 모달를 열고 자하는 것입니다 .
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 속성을 다음 위의 코드처럼 호출 할 수 있습니다