代码之家 › 专栏 › 技术社区 › Hasan Zubairi

React当前元素类更改代码无法使用setState

setstate reactjs javascript

Hasan Zubairi · 技术社区 · 1 年前

在我的应用程序中,我使用了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>

1 回复 | 直到 1 年前

-1

navid abbasnejad 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操作的需要,并确保您的组件仍然是其状态和呈现的唯一真相来源。