从 querySelectorAll 反应 useRef

Question

我想用 Ref 完成这个简单的任务。首先，您填写要生成多少个按钮，然后当您单击偶数时，我想为所有具有偶数值的按钮添加类光，并且在单击奇数时与奇数值相同。但是这种效果很简单，Vanilla JS 只需添加 querySelectorAll 并单击添加或删除类灯后，但在 React 中我无法理解这些 refs 案例。什么时候只有一个 ref 我想要如何做到这一点，但是当我想生成其中的几个时？

import React, { useState, useRef } from "react";
import "./style.css";

export default function App() {
  const [number, setNumber] = useState("");
  const evenButtonsRef = useRef([]);
  const oddButtonsRef = useRef([]);

  let buttons = [];
  const generateButtons = () => {
    for (let i = 1; i <= number; i++) {
      buttons.push(
        <button
          ref={i % 2 === 0 ? evenButtonsRef : oddButtonsRef}
          className={`${i % 2 === 0 ? "button even" : "button odd"}`}
        >
          {i}
        </button>
      );
    }
    return buttons;
  };

  const lightEvenButtons = () => evenButtonsRef.current.classList.add("light");

  const lightOddButtons = () => oddButtonsRef.current.classList.add("light");

  return (
    <div>
      <p>How many buttons?</p>
      <input
        type="text"
        onChange={e => setNumber(e.target.value)}
        placeholder="Number from 1 to 20"
      />
      {number && (
        <>
          <div className="button-group">
            <button onClick={lightEvenButtons}>Even</button>
            <button onClick={lightOddButtons}>Odd</button>
          </div>
          <div className="button-group">{generateButtons()}</div>
        </>
      )}
    </div>
  );
}

代码链接： https://stackblitz.com/edit/refbuttons?file=src/App.js

Answer 1

其实这里不需要使用 refs。第一个原因是，最好简单地保持哪些按钮应该突出显示（奇数或偶数）并根据状态设置适当的类。第二个原因是您不能将多个元素放在一个ref 中，因此您需要拥有与按钮一样多的引用。

下面是实现所需功能的代码，完全没有 refs：

import React, { useState, useRef } from "react";
import "./style.css";

export default function App() {
  const [number, setNumber] = useState("");
  const [highlightType, setHighlightType] = useState("");

  const renderButtons = () => {
    const buttons = [];
    for (let i = 1; i <= number; i++) {
      let className = `${i % 2 === 0 ? "button even" : "button odd"}`;
      if (highlightType === "odd" && i % 2 !== 0) {
        className = `${className} light`;
      }
      if (highlightType === "even" && i % 2 === 0) {
        className = `${className} light`;
      }
      buttons.push(
        <button
          key={i}
          className={className}
        >
          {i}
        </button>
      );
    }
    return buttons;
  };

  return (
    <div>
      <p>How many buttons?</p>
      <input
        type="text"
        onChange={e => setNumber(e.target.value)}
        placeholder="Number from 1 to 20"
      />
      {number && (
        <>
          <div className="button-group">
            <button onClick={() => setHighlightType("even")}>Even</button>
            <button onClick={() => setHighlightType("odd")}>Odd</button>
          </div>
          <div className="button-group">{renderButtons()}</div>
        </>
      )}
    </div>
  );
}

这里也是working demo。 renderButtons 方法可能会有所改进，但我认为它清楚地表明了这个想法。