我有2个组件,想要打开一个模态,但只有当另一个事件发生时(第一个事件是单击文本,更改该文本,然后才应该显示模态) . 我是新的反应,因为我有这两个事件我很困惑如何将道具传递给另一个组件 . 我究竟做错了什么?谢谢!
应用组件
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
display: false,
modal: false
}
this.toggle = function() {
this.setState({
display: !this.state.display
});
}.bind(this);
this.showModal = function() {
this.setState({
modal: true
});
}.bind(this);
this.hideModal = function() {
this.setState({
modal: false
});
}.bind(this);
}
componentDidUpdate(prevProps, prevState) {
if (!prevState.display && this.state.display) {
if (!this.state.modal) {
setTimeout(this.showModal, 1000);
}
}
}
render() {
const msg = this.state.display ? <p>hey</p> : <p>bye</p>,
modal = this.state.modal ? (
<AModal onClick={this.toggle} />
) : null;
return (
<div>
<a onClick={this.toggle}><p>{msg}</p></a>
{modal}
</div>
);
}
}
模态组件
import Modal from 'react-modal';
class AModal extends React.Component {
render() {
const customStyles = {
content: {
top: '50%',
left: '40%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
background: '#91c11e',
transform: 'translate(-50%, -50%)'
}
};
return (
<div>
<Modal
isOpen={this.state.modal}
onAfterOpen={this.afterOpenModal}
onRequestClose={this.hideModal}
style={customStyles}
contentLabel="Example Modal">
<h2>hey</h2>
</Modal>
</div>
);
}
}
1 回答
您的模态
isOpen
由class AModal
的状态控制,而不是从class App
控制 .我相信你需要将控制模态隐藏/可见状态的道具传递给该组件 .
所以这样的事情(用
this.state.modal
或this.state.display
替换状态:然后在你的模态组件中:
顺便说一句,我会将您在
App
的构造函数中创建的方法更新为类方法: