React 处理组件 onClick（一个打开，另一个关闭）答案

【问题标题】：React Handling component onClick (one opens, but another closes)React 处理组件 onClick（一个打开，另一个关闭）
【发布时间】：2021-12-19 01:44:54
【问题描述】：

我在为我的问题找到解决方案或正确方向时遇到问题。目前点击->className="List-section"，会显示->className="Paragraph-container"中的信息，但是有它有 4 个部分，我想让一个打开，另一个关闭。因为现在我可以全部打开，但只能一次打开一个。如果有帮助，这里是原型的链接： https://www.figma.com/proto/ooya7hVTx4BvdwQQFPXZcj/CCT-Lab-task?node-id=5%3A711&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=5%3A509

提前感谢所有帮助！

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

【问题讨论】：

标签： javascript reactjs onclick

【解决方案1】：

我认为您在此处拥有的结构对于您正在寻找的这种行为并不是最佳的。

我建议这样做：

function ListItem({ listNumber, listData }) {
  const [currentSection, setCurrentSection] = useState(0);
  
  const totalSections = listData.items.length;
  
  const handleOpenSection = () => {
     const nextSection = currentSection === totalSections ? 0 : currentSection + 1;
     setCurrentSection(nextSection);
  }

  return (
    <div className="List">
      <div className="List-section" onClick={handleOpenSection}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            {currentSection === index && <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
            }
          ))}
        </div>
    </div>
  );
}

由于您要处理 4 个部分，因此无法使用布尔值来实现此行为，因此此建议使用 items 数组中每个部分的位置来查看当时哪个部分处于打开状态。

handleOpenSection 函数只是一个看起来合适的建议，因为您不希望currentSection 大于您拥有的总部分。此外，此代码将在第一次渲染中显示第一部分，这是您可能不希望发生的事情！

【讨论】：

首先，感谢您的提示！我想逻辑是正确的，但我无法让它发挥作用。问题是listData.items.length 显示段落中项目的长度，而不是部分的长度。但是listNumber 显示了该部分的索引，即1, 2, 3 and 4。我将在下面添加其余代码，以便更清楚地理解我在说什么。
不客气！如果我理解正确，只需将 totalSections 替换为 listNumber 就可以了。代码 sn-p 也可能被破坏，因为我在没有运行真正的应用程序的情况下对其进行编码，但我认为逻辑是有效的：]

【解决方案2】：

这是我从中获取数据并将逻辑传递给组件的地方。

function App() {
  const data = [
    {
      title: "Build test task",
      items: [
        "Create repositor",
        "Implement designs",
        "Implement functionality",
      ],
    },
    {
      title: "Submit your test task",
      items: [
        "Open email client",
        "Sent link information to careers@cornercasetech.com",
      ],
    },
    {
      title: "Participate in tech interview",
      items: ["Talk with HR", "Talk with Tech team"],
    },
    {
      title: "Reciece anster",
      items: ["Receive answers", "Start your IT career"],
    },
  ];

  return (
    <div className="App">
      <header className="App-header">
        <h1>CCT Lab Process</h1>
      </header>
      <div className="App-content">
      {data.map((dataObject, index) => (
        <ListItem key={index} listData={dataObject} listNumber={index + 1} />
      ))}
      </div>

    </div>
  );
}

我想在这里处理部分的逻辑，如果你打开一个，之前打开的就会关闭，依此类推。

function ListItem({ listNumber, listData }) {
  const [isShownOne, setIsShownOne] = useState(false);

  return (
    <div className="List">
      <div className="List-section" onClick={() => setIsShownOne(!isShownOne)}
      >
        <div className="Section-item">{listNumber}</div>
        <p className="Section-title">{listData.title}</p>
      </div>
      {isShownOne && (
        <div className="List-paragraph">
          {listData.items.map((paragraphItem, index) => (
            <div className="Paragraph-container" key={index}>
              <CheckedIcon  />
              <p className="Paragraph-item">{paragraphItem}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

【讨论】：