How to use the useState() hook to open / close all detail tags In ReactJS? [duplicate]

问题

I have a useState() hook to assert or deny the open (isOpen) attribute of 3 detail tags and also 2 button(s) to control the hook, all wrapped in a 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>

This code is part of a Docusaurus project, which is similar to Create React App. It includes all the required packages and configuration scripts, including imports / exports.

In this context, neither button produces the intended onClick effect, which is to treat all isOpen attributes as part of the setIsOpen set and therefore activating the useState hook function to open / close all detail elements. Is this an artifact of my set-up or is it the code itself?

回答1:

1) Your component must start with a capital letter.

const SamplePage = () =>

2) You are setting the state incorrectly on each button. You want to set it to true on the "Open all details" button, and false on the "Close all details" button:

<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"/>

来源：https://stackoverflow.com/questions/58588990/how-to-use-the-usestate-hook-to-open-close-all-detail-tags-in-reactjs

标签

javascript

reactjs

docusaurus