javascript - 如何在 React js 中使用 ref 更改元素的样式

Question

所以我正在尝试创建一个排序算法可视化器，我遇到了一个问题，我想用新的随机高度更新循环到列表中的每个 div。

import React, { useState, useRef } from 'react'
import "../styling/Sorting.css";
import Slider from '@material-ui/core/Slider';

function Sorting() {
    const [value, setValue] = useState(0);
    
    const changeValue = (event, newValue) => {
        setValue(newValue)
    }

    const barRef = useRef()

    function randomHeight(){
        var number1 = Math.floor(Math.random(10) * 500);

        barRef.current.style.height = number1 + "px";
    }

    return (
        <div className="container">
            <nav>
                <div className="slider">
                    <Slider value={value} onChange={changeValue} max={30} valueLabelDisplay="on"/>
                </div>
                <div className="random_height">
                    <button onClick={randomHeight}>random</button>
                </div>
            </nav>
            <div className="bars">
                {Array.from({ length: value }, (_, i) => <div className="bar" id="bar" ref={barRef} key={i}></div>
                    )}
            </div>
        </div>
    )
}

export default Sorting

但是，我只能更改当前 div，这是添加到数组中的最后一个 div。

标签： javascriptreactjsuse-ref

Answer 1

您需要管理多个 refs，例如：

import React, { useState, useRef } from "react";
import "../styling/Sorting.css";
import Slider from "@material-ui/core/Slider";

function Sorting() {
  const [value, setValue] = useState(0);

  const changeValue = (event, newValue) => {
    setValue(newValue);
  };

  const barRef = useRef([]);

  function randomHeight() {
    barRef.current.forEeach((node) => {
      const number1 = Math.floor(Math.random(10) * 500);
      node.style.height = number1 + "px";
    });
  }

  return (
    <div className="container">
      <nav>
        <div className="slider">
          <Slider
            value={value}
            onChange={changeValue}
            max={30}
            valueLabelDisplay="on"
          />
        </div>
        <div className="random_height">
          <button onClick={randomHeight}>random</button>
        </div>
      </nav>
      <div className="bars">
        {Array.from({ length: value }, (_, i) => (
          <div
            className="bar"
            id="bar"
            ref={(node) => (ref.current[i] = node)}
            key={i}
          ></div>
        ))}
      </div>
    </div>
  );
}

export default Sorting;