使用 useState hooks React 隐藏多个 div

Question

我正在尝试使用 useSate 隐藏多个 div。

它们将在页面上随机呈现，而不是从列表中呈现。

我通过设置不同的变量设法做到了这一点，但找不到更通用的解决方案： https://stackblitz.com/edit/react-t3shrc?file=src%2FApp.js

还有点击外部时关闭它们的方法吗？

你能帮忙吗

export default function App() {
      const [isVisible, setIsVisible] = useState(false);
      const [isVisible2, setIsVisible2] = useState(false);

      const showInfo = (e, setIsVisible) => {
        e.preventDefault();
        setIsVisible(true);
      };
      const hideInfo = (e, setIsVisible) => {
        e.preventDefault();
        setIsVisible(false);
      };

      return (
        <div>
          <button
            onClick={(e) => {
              showInfo(e, setIsVisible);
            }}
          >
            Show info 1
          </button>
          {isVisible && (
            <div className="info">
              Info 1
              <button
                onClick={(e) => {
                  hideInfo(e, setIsVisible);
                }}
              >
                Close
              </button>
            </div>
          )}
          <br></br>
          <br></br>
          <button
            onClick={(e) => {
              showInfo(e, setIsVisible2);
            }}
          >
            Show info 2
          </button>
          {isVisible2 && (
            <div className="info">
              Info 2
              <button
                onClick={(e) => {
                  hideInfo(e, setIsVisible2);
                }}
              >
                Close
              </button>
            </div>
          )}
        </div>
      );
    }

Answer 1

我不是 100% 确定您所说的更多 'generic' 解决方案是什么意思。这是我想到的：

首先，我们创建一个更复杂的对象来基本上保存我们遇到的所有变量/部分，并将其用作我们的状态。

const initialVisibleAreas = {
  area1: true,
  area2: false
};

const [visibleAreas, setVisibleAreas] = useState(initialVisibleAreas);

请注意，这可能是您想使用 Object.keys(...) 或映射数组从数据中生成的内容。

接下来，我们为按钮创建函数以相应地使用这个新状态：

  // shows the element by given key
  const showInfo = (event, key) => {
    event.preventDefault();
    setVisibleAreas({ ...visibleAreas, ...{ [key]: true } });
  };

  // hides the element by given key
  const hideInfo = (event, key) => {
    event.preventDefault();
    setVisibleAreas({ ...visibleAreas, ...{ [key]: false } });
  };

  // sets every key to false to hide them all at once
  const hideAllInfo = (event) => {
    event.preventDefault();

    const allFalse = Object.assign(
      ...Object.keys(visibleAreas).map((key) => ({ [key]: false }))
    );

    setVisibleAreas(allFalse);
  };

最后但同样重要的是，我们在 jsx 中使用它们。这基本上是一个 'section':

<button
  onClick={(e) => {
    showInfo(e, 'area2');
  }}
>
  Show info 2
</button>
{
  visibleAreas['area2'] && (
    <div className="info">
      Info 2
      <button
        onClick={(e) => {
          hideInfo(e, 'area2');
        }}
      >
        Close
      </button>
    </div>
  );
}

回答最后一个问题；没有什么可以阻止您在周围 div 的 onClick 处理程序中调用 'hideAllInfo'。示例包含在修改后的 stackblitz 中。

完整查看修改后的stackblitz

编辑：如果您想通过单击周围的 div 来关闭所有区域，请确保不要传播按钮单击事件：

event.stopPropagation();

我再次更新了 stackblitz。

使用 useState hooks React 隐藏多个 div

Hide multiple divs with useState hooks React

javascript

toggle

show-hide

reactjs

react-hooks