Компонент React не принимает событие onChange - PullRequest
Новая
       12

Компонент React не принимает событие onChange

0 голосов
/ 24 марта 2020

Обязательный параграф "новый, чтобы реагировать" здесь. У меня есть этот компонент рейтинга, полученный от 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: ошибка синтаксического анализа: неожиданный токен, ожидается" ... "

У меня есть был в этом в течение нескольких часов, и я спасение.

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Измените код с: 

{ onRatingChange }

на: 

onRatingChange={onRatingChange}

и измените расширение вашего файла с .js на .jsx, так как вы используете синтаксис JSX

0 голосов
/ 24 марта 2020

Во-первых, вы, похоже, храните рейтинг в двух местах: в вашем местном штате (с 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 prop.

...