我如何在每次单击时更改状态？

Question

在这里，我制作了一个选项卡，每次单击按钮时都会更改其状态。相反，它在全球范围内改变状态。这就是它一次单击返回多个选项卡的原因。

function Tabs() {
  const [click, setclick] = useState(false);
  const setTab = () => setclick(!click);
  return (
    <div className="tabs">
      <div className="tab">
        {projects.map((project) => {
          return (
            <button onClick={setTab} key={project.heading}>
              {project.heading}
            </button>
          );
        })}
      </div>

      {projects.map((project) => {
        return (
          <div
            className="tab__content"
            style={click ? { display: "block" } : {}}
            key={project.heading}
          >
            <h1>{project.heading}</h1>
            <p>{project.info}</p>
          </div>
        );
      })}
    </div>
  );
}

Answer 1

您可以为每个 projects 添加一个 id，并将此值设置为您所在州 (setActiveTab(project.id)) 的活动值。（实际上，如果 heading 属性是唯一的，您也可以使用它们。）

当您通过 projects 循环显示它们时，您可以根据此 id 设置不同的样式。

(activeTab === project.id) 
  ? { display: 'block' } // selected tab
  : { display: 'none' }  // not the selected one

const projects = [
  {
    id: 'facebook',
    heading: 'Facebook',
    info:
      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, ea temporibus magnam quidem iure quasi?',
  },
  {
    id: 'messenger',
    heading: 'Messenger',
    info:
      'Corporis culpa non quia eaque maxime beatae, itaque nemo. Quis qui, quam, aperiam excepturi ipsam temporibus eum libero repellat.',
  },
];

function Tabs() {
  const [activeTab, setActiveTab] = React.useState('facebook');

  return (
    <div className="tabs">
      <div className="tab">
        {projects.map((project) => {
          return (
            <button
              key={project.id}
              onClick={() => setActiveTab(project.id)}
              style={{
                backgroundColor:
                  activeTab === project.id ? '#00695c' : '#009688',
                border: 0,
                color: 'white',
                margin: '0.5rem',
                padding: '0.5rem',
              }}
            >
              {project.heading}
            </button>
          );
        })}
      </div>

      {projects.map((project) => {
        return (
          <div
            className="tab__content"
            style={{
              display: activeTab === project.id ? 'block' : 'none',
            }}
            key={project.heading}
          >
            <h1>{project.heading}</h1>
            <p>{project.info}</p>
          </div>
        );
      })}
    </div>
  );
}

ReactDOM.render(<Tabs />, document.querySelector('#root'));

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

Answer 2

感谢分享。 .. 我也使用 useEffect 而没有使用 useState

解决了这个问题

import React, { useEffect } from "react";
import "./components.css";

const projects = [
  {
    heading: "Facebook",
    info:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, ea   temporibus magnam quidem iure quasi?",
  },
  {
    heading: "Messenger",
    info:
      "ipsum dolor Lorem  sit amet consectetur adipisicing elit. Eligendi, ea      temporibus magnam quidem iure quasi?",
  },
  {
    heading: "Todo-App",
    info:
      "ea    temporibusLorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi,  magnam quidem iure quasi?",
  },
  {
    heading: "Twitter",
    info:
      " sit amet consectetur adipisicing elit. Eligendi, ea temporibus magnam quideLorem ipsum dolorm iure quasi?",
  },
];

function Tabs() {
  useEffect(() => {
    document.querySelector("#Facebook").classList.add("active");
  }, []);
  const setTab = (id) => {
    document
      .querySelectorAll(".tab__content")
      .forEach((a) => a.classList.remove("active"));
    document.getElementById(id).classList.add("active");
  };
  return (
    <>
      <h2>Vertical Tabs</h2>
      <div className="tabs">
        <div className="tab">
          {projects.map((project) => {
            return (
              <button
                onClick={() => setTab(project.heading)}
                key={project.heading}
              >
                {project.heading}
              </button>
            );
          })}
        </div>

        {projects.map((project) => {
          return (
            <div
              className="tab__content"
              id={project.heading}
              key={project.heading}
            >
              <h1>{project.heading}</h1>
              <p>{project.info}</p>
            </div>
          );
        })}
      </div>
    </>
  );
}

export default Tabs;

我如何在每次单击时更改状态？

how do i change state at every single click?

reactjs

use-state