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

在这里，我制作了一个标签，每次点击按钮都会改变它的状态。相反，它正在全球范围内改变状态。这就是为什么它一次单击就返回多个选项卡

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>
  );
}

功能选项卡（）{
const[click，setclick]=useState（false）；
const setTab=（）=>setclick（！click）；
返回(
{projects.map（（project）=>{
返回(
{project.heading}
);
})}
{projects.map（（project）=>{
返回(
{project.heading}
{project.info}

);
})}
);
}

您可以向每个

项目添加
id
，并将此值设置为您所在州的活动值（
setActiveTab（project.id）
）。（实际上，如果属性是唯一的，也可以使用
标题
属性。）

当您循环查看
项目
以显示它们时，可以根据此
id
对它们进行不同的样式设置

（activeTab===project.id）
? {显示：'块'}//所选选项卡
：{显示：'无'}//不是所选的


const项目=[
{
id:“facebook”，
标题：“Facebook”，
信息：
“如果你是一位杰出的职业经理人，那么你是一位临时的职业经理人吗？”，
},
{
id:'信使'，
标题：“信使”，
信息：
“身体的罪过是不公平的，是不公平的，是不公平的，是不公平的，是不公平的，是不公平的。”，
},
];
函数选项卡（）{
const[activeTab，setActiveTab]=React.useState（'facebook'）；
返回(
{projects.map（（project）=>{
返回(
setActiveTab（project.id）}
风格={{
背景颜色：
activeTab==project.id？“#00695c”：“#009688”，
边界：0，
颜色：'白色'，
保证金：“0.5雷姆”，
填充：“0.5雷姆”，
}}
>
{project.heading}
);
})}
{projects.map（（project）=>{
返回(
{project.heading}
{project.info}

);
})}
);
}
ReactDOM.render（，document.querySelector（'#root'）
谢谢分享。。我还使用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;

import React，{useffect}来自“React”；
导入“/components.css”；
施工项目=[
{
标题：“Facebook”，
信息：
“我的同情心是否能成为一名杰出的宗教领袖，这是一种暂时性的巨大财富？”，
},
{
标题：“信使”，
信息：
“同一天，你是否能成为一名杰出的宗教领袖，这是一种暂时性的巨大财富？”，
},
{
标题：“待办事项应用程序”，
信息：
“同侧颞叶是否适合作为一名杰出的精神领袖、准精神领袖？”，
},
{
标题：“推特”，
信息：
“我是一位杰出的宗教领袖，我是一位伟大的领袖，我是一位杰出的领袖？”，
},
];
函数选项卡（）{
useffect（（）=>{
document.querySelector（“Facebook”）.classList.add（“active”）；
}, []);
const setTab=（id）=>{
文件
.querySelectorAll（“.tab\u内容”）
.forEach（（a）=>a.classList.remove（“活动”）；
document.getElementById（id）.classList.add（“活动”）；
};
返回(
垂直选项卡
{projects.map（（project）=>{
返回(
setTab（project.heading）}
key={project.heading}
>
{project.heading}
);
})}
{projects.map（（project）=>{
返回(
{project.heading}
{project.info}

);
})}
);
}
导出默认选项卡；
您只有一个
点击
状态，点击任何
项目
”按钮都会触发相同的
设置点击
功能。是！如果我有很多选项卡，那么我应该如何添加这么多状态？我不能对每个触发器重复使用相同的useState吗？你的
项目
数组是什么样子的？const projects=[{标题：“Facebook”，信息：“Lorem ipsum dolor sit amet concertetur adipising elit.Eligendi，ea temporibus magnam quidem iure quasi？”，}，{标题：“Messenger”，信息：“Lorem ipsum dolor sit amet Concertetur Adipising Elite.Eligendi，ea Temporatibus magnam quidem iure quasi？”，}]；感谢分享……我还使用useEffect和不使用useStatefunction选项卡解决了这个问题（{useEffect（（）=>{document.querySelector（#Facebook”）.classList.add（“active”）；}，[]）；const setTab=（id）=>{document.queryselectoral（.tab_ucontent”）.forEach（（a）=>a.classList.remove（“active”）；document.getElementById（id）.classList.add（“active”）；}；return（垂直选项卡{projects.map（（project）=>{return return setTab（project.heading）}键={project.heading}>{project.heading}）；}}{projects.map（（project）=>{return（{project.heading}{project.info}
）；}）；}