从 querySelectorAll 反应 useRef

Question

我想用 Ref 完成这个简单的任务。首先，您填写要生成的按钮数量，然后当您单击偶数时，我想为所有具有偶数值的按钮添加 class 灯，单击奇数时具有奇数值。但是这种效果很简单 Vanilla JS 只需添加 querySelectorAll 并在单击后添加或删除 class 灯，但在 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>
  );
}

Link 编码： https://stackblitz.com/edit/refbuttons?file=src/App.js

Answer 1

其实你不需要在这里使用refs。第一个原因是简单地保持应该突出显示哪些按钮（奇数或偶数）并根据状态设置适当的 class 的状态要好得多。第二个原因是您不能将多个元素放入一个 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 方法可能有点改进，但我认为它清楚地演示了这个想法。

从 querySelectorAll 反应 useRef

React useRef from querySelectorAll

javascript

reactjs

ref