如何从 React 中另一个对象的事件更改对象集合的 css 样式？

如何解决如何从 React 中另一个对象的事件更改对象集合的 css 样式？

如何在 React 中更改/添加/删除样式属性？我习惯于查询选择器，但我知道由于 React 中的状态变化，这不是最好的方法。一般来说，我如何在 react 中访问样式属性并从另一个元素事件中更改它们？

const elements = document.querySelectorAll(".option-item")

function changeBackground() {
    elements.style.background = "red"
  
  }


<div className="options-panel" onMouSEOver={changeBackground}>
 <div className="option-item">1</div>
 <div className="option-item">2</div>
 <div className="option-item">3</div>
 <div className="option-item">4</div>
</div>

.options-panel{
  background-color:black;  //<<---when i hover over this corresponding element
}

.option-item{
  background-color:blue    //<<---all elements with this classname change to "red"//
}

解决方法

原因是您将 event 传递给函数并尝试定义要调用的事件属性。 在您的情况下，您需要获得目标。所以试试这样：

const elements = document.querySelectorAll(".option-item")

function changeBackground(e) {
    e.target.style.background = "red"
}


<div className="options-panel" onMouseOver={changeBackground}>
 <div className="option-item">1</div>
 <div className="option-item">2</div>
 <div className="option-item">3</div>
 <div className="option-item">4</div>
</div>

,

我只想支持之前的答案并补充一点，您可能需要添加 onMouseLeave 处理程序来重置元素的原始背景。

,

//SET THE ATTRIBUTES VALUES YOU WANT IN STATE FIRST//
const [panelWidth,setPanelWidth] = useState("50px");
const [opacity,setOpacity] = useState(0);


//MY FUNCTIONS CHANGES OPACITY AND WIDTH VALUE//
function toggleStretch() {
    if (panelWidth === "50px") {
      setPanelWidth("300px");
      setOpacity(1);
    } else if (panelWidth === "300px") {
      setPanelWidth("50px");
      setOpacity(0);
    }
  }

//USE YOUR EVENT TO CALL A FUNCTION AND SET THE ATTRIBUTES BY PASSING STATE VALUE AS A STYLE PROP I CHOSE MOUSEOVER//

  <div
        className="options-panel"
        style={{ width: panelWidth }}
        onMouseOver={toggleStretch}
        onMouseLeave={toggleStretch}
      >
        <div className="options-item">
          <div>
            <FontAwesomeIcon icon={faHome}></FontAwesomeIcon>
          </div>
          <p style={{ opacity }}> Home</p>
        </div>
        <div className="options-item" onClick={toggleListHandler}>
          <div>{iconState ? <FontAwesomeIcon icon={faFolder} /> : <FontAwesomeIcon icon={faFolderOpen} />} </div>
          <p style={{ opacity }}> About</p>
        </div>
  </div>

为了平滑过渡，只需添加到您的 CSS 文件中：

.options-panel {
 
  transition-duration: 0.5s;
}

.options-item {

  transition-duration: 0.3s;
}