如何在React表单中获取react-rating组件的取值？

嘿，我之前用这个Rating组件的时候也踩过同样的坑！咱们先搞清楚问题出在哪：

你遇到的TypeError: undefined is not an object (evaluating 'event.target.name')，本质是因为这个Rating组件的onChange回调没有传递标准的DOM事件对象，它直接把选中的评分数值作为参数传过来了，而不是带target属性的event。所以你原来用来处理普通表单输入（比如input、select）的逻辑，在这个组件上自然就失效了。

给你两个简单的解决方案：

方案1：单独编写评分变更处理函数 #

直接为Rating组件写一个专属的处理函数，接收评分值并更新表单状态：

const handleRatingChange = (ratingValue) => {
  // 假设你的表单状态存在formState里，facilityRating是存储评分的字段
  setFormState(prevState => ({
    ...prevState,
    facilityRating: ratingValue
  }));
};

// 在组件中使用
<Rating onChange={handleRatingChange} />

方案2：复用现有表单处理函数（包装调用） #

如果你想继续用原来的表单状态更新逻辑，可以手动把评分值和字段名传递进去：

// 假设你原来的表单处理函数是这样的
const handleInputChange = (name, value) => {
  setFormState(prevState => ({
    ...prevState,
    [name]: value
  }));
};

// 使用Rating时，通过箭头函数包装传递参数
<Rating onChange={(value) => handleInputChange('facilityRating', value)} />

用这两种方式中的任意一种，你就能正常获取并更新评分值了，再去console.log你的formState，就能看到facilityRating字段跟着选中的星星数变化啦～

内容的提问来源于stack exchange，提问作者Kathy