如何使用useState（）挂钩在ReactJS中打开/​​关闭所有详细信息标签？

Question

我有一个useState()钩子来声明或拒绝3个open标签的isOpen（detail）属性，还有2个button控制钩子，它们全部包裹在div中：

const {useState} = React;

const SamplePage = () => {
    const [isOpen, setIsOpen] = React.useState(false); 

    return (
        <div>
            <details open={isOpen}>
                <summary>
                    First text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Second text detail.
                </summary>
                <p>testing</p>
            </details>
            <details open={isOpen}>
                <summary>
                    Third text detail.
                </summary>
                <p>testing</p>
            </details>

            <button onClick={() => setIsOpen(false)}>Open All Details.</button>
            <button onClick={() => setIsOpen(true)}>Close All Details.</button>
        </div>
    );
  }
  
ReactDOM.render(<SamplePage/>, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>

此代码是Docusaurus项目的一部分，类似于Create React App。它包括所有必需的软件包和配置脚本，包括imports / exports。

在这种情况下，两个按钮都不会产生预期的onClick效果，即将所有isOpen属性视为setIsOpen集的一部分，因此会激活useState钩子函数来打开/关闭所有detail元素。这是我的设置的人工产物还是代码本身？

Answer 1

1）您的组件必须以大写字母开头。

const SamplePage = () =>

2）您在每个按钮上设置的状态都不正确。您想要在“打开所有详细信息”按钮上将其设置为true，在“关闭所有详细信息”按钮上将其设置为false：

<button onClick={() => setIsOpen(true)}>Open All Details.</button>
<button onClick={() => setIsOpen(false)}>Close All Details.</button>

const SamplePage = () => {
  const [isOpen, setIsOpen] = React.useState(false); 

  return (
      <div>
          <details open={isOpen}>
              <summary>
                  First text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Second text detail.
              </summary>
              <p>testing</p>
          </details>
          <details open={isOpen}>
              <summary>
                  Third text detail.
              </summary>
              <p>testing</p>
          </details>

          <button onClick={() => setIsOpen(true)}>Open All Details.</button>
          <button onClick={() => setIsOpen(false)}>Close All Details.</button>
      </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SamplePage />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"/>