React组件不会发生onChange事件

Question

这里是必填的“新反应”段落。我有这个来自Material-ui的评估组件，我正尝试将值发送到数据库。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Rating from '@material-ui/lab/Rating';
import Box from '@material-ui/core/Box';

const labels = {
  0.5: 'Worst of the Worst',
  1: 'Bad',
  1.5: 'Poor',
  2: 'Passable',
  2.5: 'Ok',
  3: 'Good',
  3.5: 'Damn Good',
  4: 'Great',
  4.5: 'Love',
  5: 'Perfection',
};

const useStyles = makeStyles({
  root: {
    width: 200,
    display: 'flex',
    alignItems: 'center',
  },
});

export default function HoverRating(props) {
  const [value, setValue] = React.useState(2);
  const [hover, setHover] = React.useState(-1);

  const classes = useStyles();

  const onRatingChange = (event) => {
    console.log(event.target.value)
    props.reduxDispatch ({ type: "RATING_CHANGE", value: event.target.value 
    })
  }

  return (
    <div className={classes.root}>
      <Rating
        name="hover-feedback"
        value={value}
        defaultValue={0}
        precision={0.5}
        size="large"
        onChange={(event, newValue) => {
          setValue(newValue);
          console.log("your newValue is " +  newValue)
        }}
        onChangeActive={(event, newHover) => {
          setHover(newHover);
        }}
        { onRatingChange }
      />
      <br/>
      {value !== null && <Box ml={2}>{labels[hover !== -1 ? hover : value]}</Box>}
    </div>
  );
}

它不喜欢我的onRatingChange函数。我已经将它移到了整个地方，但仍然会引发错误。我真的不明白这个问题。我主要是-

“ ./ src / components / Rating.js行54:11：解析错误：意外的令牌，预期为“ ...”

我已经在这里待了几个小时，我才得以救赎。

Answer 1

更改您的代码：

Answer 2

[首先，您会看到将评级存储在两个位置：在本地状态下（带有React.useState），从onRatingChange函数的外观看，它存储在某个地方的Redux存储中。最好选择一个并使用它。