反应文本下拉切换（切换所有）

Question

我正在尝试制作一个小文本下拉菜单。当您单击标题文本时，将显示 p 标签。它正在工作，但是......当我只点击它们时，它正在切换所有这些。我有多个带有文本和功能的“li”标签。所以我没有循环任何东西

const [isActive, setActive] = useState(false)

  const toggleText = () => {
    setActive(!isActive)
  } 


  <li>
              <h2 onClick={toggleText}>Lorem ipsum dolar sit amet</h2>

              {isActive && (
                <p>
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut
                  reprehenderit explicabo laudantium quas, minus recusandae
                  quibusdam dolorem dolorum possimus natus quod nam, et labore
                  iste eos? Ducimus optio dolor soluta!
                </p>
              )}
              <div onClick={toggleText} className='dropDown__plus'>
                {!isActive ? (
                  <img src={plusIcon} alt='Plus icon' />
                ) : (
                  <img src={minusIcon} alt='Minus Icon' />
                )}
              </div>
            </li>

Answer 1

根据您的问题和评论，您正在同一组件中跨多个元素重用 isActive 状态，这意味着每个元素都没有自己的 isActive状态：它们在全局范围内共享相同的状态。

您可以创建一个 child 组件来专门处理状态，同时允许它以 props 的形式接收内容，例如标题和内容：

import { useState } from "react";

export default function MyComponent(props) {
  const [isActive, setActive] = useState(false);

  const toggleText = () => {
    setActive(!isActive);
  };

  return (
    <li>
      <h2 onClick={toggleText}>{props.heading}</h2>

      {isActive && props.content}
      <button type="button" onClick={toggleText} className="dropDown__plus">
        {!isActive ? <>+</> : <>-</>}
      </button>
    </li>
  );
}

然后，在您原来的 parent 组件中，只需使用 <MyComponent> 来处理所有 <li> 条目：

<ul>
  <MyComponent
    heading="Lorem ipsum dolor sit amet"
    content={<p>Some text here</p>}
  />
  <MyComponent
    heading="Foo bar"
    content={<p>More foo bar content</p>}
  />
  <MyComponent
    heading="Last header"
    content={<p>C'est la vie</p>}
  />
</ul>

您可以在此处查看 proof-of-concept 示例：

反应文本下拉切换（切换所有）

React text dropdown toggle (toggles all)

javascript

reactjs

react-hooks

dropdown