reactjs - 使用反应钩子比较 prevstate 和 current state

Question

我有一个仪表，它的指针颜色（最初是灰色），我需要随着仪表值的变化而改变（变成黑色）。我尝试实现useRef()比较值的变化并将仪表指针的颜色从灰色更新为黑色。

但它似乎没有相应地工作。始终保持最初通过的那个。

这是工作片段：

反应速度计

如果有任何解决方法可以实现这一点，那么请帮助实现这一点？提前致谢

标签： reactjsreact-d3-speedometer

Answer 1

I think this works:

import React, { useState, useEffect } from "react";
import ReactSpeedometer from "react-d3-speedometer";
import "./styles.css";

export default function App() {
  const [color, setColor] = useState("gray");
  const [value, setValue] = useState(0.5);

  useEffect(() => {
    if (value > 0.5) {
      setColor("black");
    } else{ setColor("gray")}
   },[value]);


  const changeValue = e => {
    console.log(e.target.value);
    setValue(e.target.value);  
  };
  console.log("current value", color);
  return (
    <div className="App">
      <input
  
        type="number"
        min={0.5}
        max={1.5}
        placeholder="enter number"
        style={{ margin: "20px 0 40px 0" }}
        onChange={e => changeValue(e)}
      />

      <ReactSpeedometer
        forceRender
        needleHeightRatio={0.9}
        needleColor={color}
        textColor={color}
        needleTransition={"easeCircleInOut"}
        maxSegmentLabels={11}
        segments={11}
        minValue={0.5}
        maxValue={1.5}
        customSegmentStops={[
          0.5,
          0.6,
          0.7,
          0.8,
          0.9,
          1.0,
          1.1,
          1.2,
          1.3,
          1.4,
          1.5
        ]}
        segmentColors={[
          "Lime",
          "LawnGreen",
          "GreenYellow",
          "DodgerBlue",
          "DeepSkyBlue",
          "SkyBlue",
          "DarkOrange",
          "Orange",
          "OrangeRed",
          "Red"
        ]}
        value={value}
      />
    </div>
  );
}