单击时如何获得星级评分的当前值？答案

【问题标题】：How I can get the current value of a stars rating when I click?单击时如何获得星级评分的当前值？
【发布时间】：2021-03-30 03:05:06
【问题描述】：

我是 ReactJS 的新手，我有一个起始值为 5 星的评级星组件，每次单击星时它都会给我以前的值。

import React, {useState} from "react";
import Rating from '@material-ui/lab/Rating';
import "./styles.css";

export default function App() {
  const [value, setValue] = useState(5);
  return (
    <div className="App">
      <Rating
          name="simple-controlled"
          value={value}
          onChange={(event, newValue) => {
            setValue(newValue);
            console.log(value);
          }}
      />
    </div>
  );
}

所以在 console.log 中第一次点击（假设我点击了 2 颗星）返回 5 下一次点击返回 2 颗星等...

当我点击星星时如何获取当前值（当我点击 2 颗星星时它返回 2）？

https://i.stack.imgur.com/PixId.png

代码沙盒示例：https://codesandbox.io/s/dank-sun-ysfl3?file=/src/App.js

任何帮助将不胜感激，非常感谢！

【问题讨论】：

erm，您不应该在更改之前记录值吗？
setValue 不会立即更改值。该值仅在组件重新渲染后更新。
console.log(newValue)? :D

标签： javascript reactjs react-hooks material-ui

【解决方案1】：

通过记录value，您只是记录了组件的当前状态，而不是新状态。有两种解决方案：

只需在回调中使用newValue 变量
使用This question中给出的解决方案

简要说明：useRef 为特定值生成状态引用，从而可以在组件外部访问它。示例：

import React, { useRef, useState } from "react";
import Rating from '@material-ui/lab/Rating';
import "./styles.css";

export default function App() {
  const [value, setValue] = useState(5);
  // Create ref 
  const valueRef = useRef();
  // Initialize ref
  valueRef.current = value;
  return (
    <div className="App">
      <Rating
        name="simple-controlled"
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
          // Get the latest state
          console.log(valueRef.current);
        }}
      />
    </div>
  );
}

【讨论】：