反应当前元素类更改代码不适用于 setState

Question

在我的应用程序中，我使用 ul 和 li 标签，当单击一个 li 时，应用程序将使用类更改其背景颜色。我还想保存该 li 标签的值。我正在尝试将 setState 钩子与类更改代码一起使用，但它似乎无法相互配合。我的代码是

function store(e,q,a){
    const allElements = document.querySelectorAll('*')
    allElements.forEach(el => el.classList.remove('select'))
    e.currentTarget.classList.add('select');
    setCurquest({quest:q,ans:a});
   }

<li onClick={(e) => {checkAns(e,quest.Qid,ans.Content)}}>{ans.Content}</li>

Answer 1

看起来您正在尝试在 React 中管理所选列表项 (li) 的状态，同时还直接操作 DOM 来更改所选项目的背景颜色。在 React 中通常不推荐直接 DOM 操作，因为它可能导致实际 DOM 状态和 React 组件状态之间的不一致。相反，您应该使用 React 的状态和渲染功能来实现所需的行为。

您可以通过使用组件中的状态来跟踪当前选定的项目来管理选择状态和背景颜色更改。然后，您可以根据项目是否为选定项目有条件地将类应用到该项目。这种方法将所有内容保留在 React 的声明性模型中。

以下是如何修改代码以使用 React 状态来管理选择和背景颜色更改的示例：

import React, { useState } from 'react';

function MyComponent() {
  const [currentSelection, setCurrentSelection] = useState(null);

  // This function is called when an item is clicked
  const handleItemClick = (e, questionId, answerContent) => {
    // Update the current selection state with the clicked item's details
    setCurrentSelection({ quest: questionId, ans: answerContent });

    // You no longer need to manually manipulate classes on DOM elements
  };

  // Example data (replace with your actual data)
  const questions = [
    { Qid: 1, answers: [{ Content: 'Answer 1' }, { Content: 'Answer 2' }] },
    // Add more questions and answers here
  ];

  return (
    <ul>
      {questions.map((quest) => (
        quest.answers.map((ans) => (
          <li
            key={ans.Content} // Ensure you have a unique key for each list item
            onClick={(e) => handleItemClick(e, quest.Qid, ans.Content)}
            className={currentSelection && currentSelection.ans === ans.Content ? 'select' : ''}
          >
            {ans.Content}
          </li>
        ))
      ))}
    </ul>
  );
}

在此示例中，setCurrentSelection 用于使用当前所选项目更新组件的状态。每个 li 元素的 className 是根据其内容是否与当前所选项目的内容匹配来有条件设置的。这消除了直接 DOM 操作的需要，并确保您的组件仍然是其状态和渲染的单一事实来源。