Question

我正在为我的应用程序创建一个课程复习表格，但有一个我无法解决的怪异问题。我正在使用react-stars库（https://github.com/n49/react-stars）创建一个非常简单的star评估组件。像这样：

import React, { Component } from 'react';
import ReactStars from 'react-stars';

class StarsRating extends Component {

 render(){
  const field = this.props;
  console.log(field)

   return(
     <React.Fragment>
      <ReactStars
       count={5}
       size={24}
       onChange={(value) => field.input.onChange(field.input.name, value)}
       half={false}
       color2={'#ffd700'}
       />
     </React.Fragment>
   )
 }
}

export default StarsRating;

问题是，当我尝试获取父组件中的值时，名称和值都得到相同的值，即来自字段组件的{field.input.name}。如果将{ratingChanged}函数更改为StarsRating组件，它将返回正确的数字值。为什么会发生这种情况的任何线索？我是否应该仅将函数移至子组件并找出一种将结果作为父项中的回调的方法？任何帮助将不胜感激：）

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import StarsRating from './StarsRating';

class ReviewForm extends Component {

ratingChanged(name, value){
  console.log(name)
  console.log(value)
}

render(){
  return(
    <Field name="host_rating" onChange={this.ratingChanged} component={StarsRating}/>
    )
  }
}

export default reduxForm({
form: 'review'
})(ReviewForm);

redux-form字段组件从子组件获取错误的值

0 个答案: