如果使用 e.target 單擊特定數據，React 下拉列表僅顯示值？

Question

所以我正在嘗試制作這個手風琴，現在它通過我的數據進行映射，並且當我點擊我的h1時基本上顯示所有下拉值，但我只希望它顯示我點擊的特定h1的下拉列表而不顯示整體價值

    const Accordion = () => {
      const [clicked, setClicked] = useState(false);

      const toggle = e => {
        if (e.target) {
          setClicked(!clicked);
        }

        console.log(e.target);
      };

      return (
        <div>
          {Data.map((item, index) => {
            return (
              <div key={index}>
                <h1 onClick={e => toggle(e)}>{item.question}</h1>
                {clicked ? (
                  <div>
                    <p>{item.answer}</p>
                  </div>
                ) : null}
              </div>
            );
          })}
        </div>
      );
    };

我的開關 function 顯示了我點擊的 h1 的正確 e.target 值，但我不知道如何在我點擊它時只顯示該h1值而不是顯示所有h1's值

這是我的數據文件

           export const Data = [
        {
          question: 'What 1?',
          answer: 'answer 1'
        },
        {
          question: 'What 2',
          answer: 'answer 2'
        },
        {
          question: 'What 3?',
          answer: 'answer 3'
        }
      ];

我如何重構我的代碼以僅顯示問題 1 和答案 1，而不是在單擊時顯示所有問題和答案？

Answer 1

我的建議是使用它自己的 state 的單獨組件，並將其用於每個手風琴項目。

const AccordionItem = (props) => {
  const [clicked, setClicked] = useState(false);

  return (
    <div>
      <h1 onClick={() => setClicked(! clicked)}>{props.question}</h1>
      {clicked && (
        <div>
          <p>{item.answer}</p>
        </div>
      )}
    </div>
  );
};

const Accordion = () => {
  return (
    <div>
      {Data.map((item, index) => {
        return (
          <AccordionItem
            key={index}
            question={item.question}
            answer={item.answer}
          />
        );
      })}
    </div>
  );
};

Answer 2

您必須將點擊的問題放在 state 中，而不僅僅是是否點擊了某些內容。 例如https://codesandbox.io/s/summer-night-4uulw?file=/src/App.js

const Data = [
    {
        question: 'What 1?',
        answer: 'answer 1',
    },
    {
        question: 'What 2',
        answer: 'answer 2',
    },
    {
        question: 'What 3?',
        answer: 'answer 3',
    },
];

const Accordion = () => {
    const [activeQn, setActiveQn] = useState(null);

  const toggle = ( index ) => {
    // If the clicked qn is already active, then collapse it
    if ( activeQn === index ) {
      return setActiveQn(null)
    } 
    // Otherwise show the answer to the clicked qn
    setActiveQn(index)
    };

    return (
        <div>
            {Data.map((item, index) => {
                return (
                    <div key={index}>
                        <h1 onClick={() => toggle(index)}>{item.question}</h1>
                        {activeQn === index ? (
                            <div>
                                <p>{item.answer}</p>
                            </div>
                        ) : null}
                    </div>
                );
            })}
        </div>
    );
};

這樣，只有點擊的答案才會顯示，如果用戶希望折疊答案，也可以這樣做。

Answer 3

您需要跟蹤單擊了哪個 div。 您可以像這樣在數據中分配id ：

const Data = [
  {
    question: "What 1?",
    answer: "answer 1",
    id: 0
  },
  {
    question: "What 2",
    answer: "answer 2",
    id: 1
  },
  {
    question: "What 3?",
    answer: "answer 3",
    id: 2
  }
];

然后在toggle方法上發送此 id 並檢查 id 是否等於所選的一個或不這樣：

const toggle = (e, id) => {
    if (e.target) {
      setSelected(id === selected ? null : id); //selected and id are same it means close the toggle
    }

    console.log(e.target);
  };

內部渲染檢查如下：

{selected === item.id ? (
              <div>
                <p>{item.answer}</p>
              </div>
            ) : null}

這是完整的演示和代碼： https://codesandbox.io/s/toggle-accordian-eplpw