useState无法更改布尔值

时间:2019-06-12 22:05:35

标签: reactjs react-hooks

我正在一个项目中,在该项目中单击段落中的特定单词可以打开/关闭一个包含子组件<Overlay/>的组件<Modal />。关闭按钮位于Modal内部,并附加到回调函数。我尝试使用useState并在booleantrue之间设置一个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属性吗?

0 个答案:

没有答案