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

从以下位置更改代码：

{ onRatingChange }

收件人：

onRatingChange={onRatingChange}

将文件扩展名从.js更改为.jsx，因为您使用的是JSX语法

Answer 2

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

对于您的问题的直接答案，您的语法错误。您正在通过以下方式编写Rating组件：

<Rating
  // ...
  onChange={(event, newValue) => {
    setValue(newValue);
    console.log("your newValue is " +  newValue)
  }}
  // ...
  { onRatingChange }
/>

Rating组件需要一个onChange道具。我假设您希望在等级更改时调用onRatingChange函数。因此，您将编写：

<Rating
  // ...
  onChange={onRatingChange}
/>

这里的复杂之处在于，您试图为评级更改事件注册两个不同的处理程序。最重要的是，决定一个，然后将其作为回调函数传递给onChange道具。

React组件不会发生onChange事件

2 个答案: