Material-UI Rating returns 字符串而不是数字

Question

我运行遇到 Material UI 评级组件的问题。

我希望它在更改时 return 是一个数字，但它 return 是一个字符串。我提供的初始值 (this.props.data.feelings_rating) 是一个数字，但每当我在我的应用程序中更改它时，它就会变成一个字符串。这是相关代码：

评分组件：

<Rating
          value={this.props.data.feelings_rating}
          name="feelings_rating"
          onChange={handleChange}
          size="large"
          getLabelText={(value) => customIcons[value].label}
          IconContainerComponent={IconContainer}
        />

处理变化：

handleChange = (e) => {
    var diary = this.state.diary
    diary[e.name] = e.value
    this.setState({diary: diary})
  }

与图标有关的其他内容：

const customIcons = {
  1: {
    icon: <SentimentVeryDissatisfiedIcon />,
    label: 'Very Dissatisfied',
  },
  2: {
    icon: <SentimentDissatisfiedIcon />,
    label: 'Dissatisfied',
  },
  3: {
    icon: <SentimentSatisfiedIcon />,
    label: 'Neutral',
  },
  4: {
    icon: <SentimentSatisfiedAltIcon />,
    label: 'Satisfied',
  },
  5: {
    icon: <SentimentVerySatisfiedIcon />,
    label: 'Very Satisfied',
  },
};

function IconContainer(props) {
  const { value, ...other } = props;
  return <span {...other}>{customIcons[value].icon}</span>;
}

IconContainer.propTypes = {
  value: PropTypes.number.isRequired,
};

我在互联网上找不到其他人遇到这个问题，所以有人能发现我做错了什么吗？任何答案将不胜感激。

Answer 1

评分组件的onChange给你2个参数，一个是事件对象，另一个是实际值。您可以从第二个参数 newValue

中检索选定的值

handleChange = (e, newValue) => {
    // create a copy of the state
    const clonedDiary = {...this.state.diary}
    // now mutate the clonedDiary directly
    clonedDiary[e.name] = newValue;
    this.setState({diary: clonedDiary })
 }

参考

Rating API

Material-UI Rating returns 字符串而不是数字

Material-UI Rating returns string instead of number

javascript

types

onchange

reactjs

material-ui