我正在一个项目中,在该项目中单击段落中的特定单词可以打开/关闭一个包含子组件<Overlay/>
的组件<Modal />
。关闭按钮位于Modal
内部,并附加到回调函数。我尝试使用useState
并在boolean
和true
之间设置一个false
隐藏值来处理这种情况,但是似乎setHidden
函数不起作用
我的部分代码在这里:
const [hidden, setHidden] = useState(false);
const { renderOverlay } = getOverlay();
const openModal = text => (
<h1
onClick={() => {
openOverlay();
}}
>
{`${text}`}
</h1>
);
const closeModal = () => {
setHidden(true);
console.log(hidden); // false
};
const openOverlay = () => {
!hidden
? renderOverlay(
<Modal
title="ABCDE"
message="
You must be a member of to access the app
"
close={{ onClose: closeModal, text: 'Close' }}
/>
)
: renderOverlay();
};
return (
<span
className={paragraph.style === 'bold' ? 'boldspan' : null}
key={paragraph.paragraphKey}
style={{ color: paragraph.color }}
>
{paragraph.isLink ? openModal(paragraph.text) : paragraph.text + addSpace}
{paragraph.break ? <br /> : null}
</span>
);
模式:
export default function Modal({ title, message, close, route }) {
return (
<ModalStyles>
<div className="top__border" />
<div className="content">
<span className="title">{title}</span>
<span className="message">{message}</span>
<div className="button__group">
{close && <Button type="primary" text={close.text} onClick={close.onClose} />}
{route && <Button type="primary" text={route.text} onClick={route.onRoute} />}
</div>
</div>
</ModalStyles>
);
}
有人知道为什么我不能在hidden
函数中更改closeModal
属性吗?