模式弹出窗口无法正常工作(希望背景页面变暗)

Question

页面上覆盖了一个按钮，一旦按下按钮，页面应该会变暗并显示一个模式弹出窗口。

但是，对于我的代码，弹出窗口只是显示，但背景页面不会受到影响。但是，模式可以正确打开和关闭。

按钮的代码：

class MessageBrokerButton extends Component {
constructor(props) {
super(props)
this.state = {
isShowing: false
}
}
openModalHandler = (e) => {
this.setState({
isShowing: true
});
e.preventDefault();
}
closeModalHandler = () => {
this.setState({
isShowing: false
});
}
render() {
return (
<div>
<button className='message-broker' onClick={this.openModalHandler}>
Message Broker
</button>
<div className='message-icon'></div>
{ this.state.isShowing ?         
<Popup 
show={this.state.isShowing} 
close={this.closeModalHandler}>
Test
</Popup> 
: null 
}
</div>
)
}
}

模态代码：

const Popup = (props) => {
return (
<div>
<button onClick={props.close}>CLOSE</button>
<p> {props.children}</p>
</div>
)
}

按钮所在页面的相关代码：

class Page extends Component {
constructor(props) {
super(props);
this.state = {
};
};
render() {
let page100 = 
<div>
<MessageBrokerButton></MessageBrokerButton>
</div>
if (this.props.currentPage !== this.state.page) {
page100 = null;
}
return (
<form onSubmit={this.handleFormSubmit}>
{page100}
</form>
);
}
}

我知道我绝对没有考虑正确的样式规则，以及单击MessageBrokerButton后如何更改Page类。但我不确定要更改哪些部分以及应该更改哪些部分。

Answer 1

有多种方法可以做到这一点。您可以做的是创建一个新的影子组件，它是Page的子组件(或任何实际的根组件(。然后，此 Shadow 被赋予一个状态属性，该属性告诉组件是否渲染 shadow-div。

这一切都很容易。最复杂的部分通常是想出一些合理的状态管理系统，以便您可以触发 Shadow，而无需四处传递"启用影子"处理程序。我建议为此查看Redux。

使用 z 索引样式确保阴影显示在页面和模式之间。例如阴影 z 索引 1，模态容器 2。此外，请确保阴影和模式容器都定位为绝对位置，因为它们都应该覆盖页面。

这是一个伪简化：

class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
hasShadow: false,
modal: null, // Modal can be a React-component, like the Popup.
};
}
handleHasShadow = hasShadow => {
this.setState({ hasShadow });
}
handleSetModal = modal => {
this.setState({ modal });
}
render() {
return (
<div>
<form ...>
{
this.props.currentPage === this.state.page
? <MessageBrokerButton handleHasShadow={this.handleHasShadow} />
: null
}
</form>
<Shadow isEnabled={this.state.hasShadow} />
{/* You can give modal as a prop too! */}
<ModalContainer>{modal}</ModalContainer>
</div>
);
}
}

影子.jsx

const Shadow = ({ isEnabled }) => {
return isEnabled ? (
<div
style={{
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
background: '#000000',
opacity: 0.5,
zIndex: 1,
}}
/>
) : null;
}

现在你只需使用 this.props.handleHasShadow(true/false( 函数来启用/禁用影子。阴影将与父(页面(组件一样大。

您可能还希望确保焦点停留在模态内。否则，用户将能够从模态中跳出。这里的关键词是焦点陷阱。