时间戳

首页 > 解决方案 > 以反应方式选择所有列表项的正确方法是什么

javascript - 以反应方式选择所有列表项的正确方法是什么

问题描述

我正在尝试在我的 React/Gatsby 应用程序中的每个列表项上添加悬停事件。当li项目悬停时，我想更改另一个元素的颜色，在这种情况下是“球”元素。

所以我ul像这样设置对父级的引用：

let ulRef = useRef()

并添加对 jsx 的引用：

<div>
  <div className="ball">Ball</div> // Element I want to change when li is hovered
  <ul ref={ulRef}>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
    <li>
     <a href="#">Item</a>
    </li>
  </ul>
</div>

li选择所有元素的正确方法是什么？我尝试使用querySelectorAll：

let listItems = ulRef.current.querySelectorAll("li")

这似乎有效，但再次运行项目后，我收到此错误： TypeError: Cannot read property 'querySelectorAll' of undefined

标签： javascriptreactjsjsx

解决方案

根据评论

有点。在每个列表项悬停时，我想将 Ball div 的背景颜色更改为差异颜色。

和

好，谢谢。我正在构建一个功能组件，因此必须重构您的代码。

我认为这很简单：

const App = () => {
  const [ballColor, setBallColor] = React.useState();
  return (
    <div>
      <div style={{ backgroundColor: ballColor }}>Ball</div>
      <ul>
        <li onMouseOver={() => setBallColor("purple")}>Purple</li>
        <li onMouseOver={() => setBallColor("orange")}>Orange</li>
        <li onMouseOver={() => setBallColor("lightgoldenrodyellow")}>Light Goldenrod Yellow</li>
      </ul>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读