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 Line 54:11: Parsing error: Unexpected token, expected "..."

我已經在這工作了幾個小時，我得救了。

Answer 1

更改您的代碼：

{ onRatingChange }

到：

onRatingChange={onRatingChange}

並將文件擴展名從.js更改為.jsx因為您使用的是 JSX 語法

Answer 2

首先，您似乎將評級存儲在兩個地方：在您的本地狀態（使用React.useState ），以及從您的onRatingChange函數的外觀onRatingChange ，在某個地方的 Redux 存儲中。 選擇一個並使用它是個好主意。

至於直接回答你的問題，你的語法是錯誤的。 您正在按以下方式編寫Rating組件：

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

Rating組件需要一個onChange道具。 我假設您希望在評級發生變化時調用onRatingChange函數。 因此，你會寫：

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

不過，這里的復雜之處在於您正試圖為評級更改事件注冊兩個不同的處理程序。 最重要的是，決定一個，然后將其作為回調函數傳遞給onChange道具。