使用redux进行反应-使用redux形式进行评分

Question

我正在尝试实现一个简单的表单，用户可以在其中发表评论的同时对文章评分。我react-rating在github上找到了，并想在我的中使用它redux-form。

我放置我的StarRating组件

<StarRating onChange={(value) => { this.changeRate("rating", value) } }/>

并隐藏Field在我的表单中，名称设置为"rating"

<Field component="input" type="hidden" name="rating"/>

调用函数的changeRate目的是将表单中隐藏字段的值更改为对星号单击后的值。

changeRate(name, value) {
    this.props.change(name, value) // function provided by redux-form
}

当我第一次单击等级时，输入的值会更改，但是选定的星星会消失。第二次单击后，星星保持选中状态。

我试图使用jQuery更改隐藏字段的值。-选择星标可以正常工作，但发布时字段值未包含在redux表单内。结合使用jQuery和change函数可以得到与没有jQuery时相同的结果。

是什么原因造成的？

Answer 1

首先，您将需要一些dynamic props代表starRating组件中正在变化的星星的数量，而不仅仅是像您一样的onChange回调。像这样：

<StarRating 
  onChange={(value) => { this.changeRate("name", value) } }
  initialRate={ this.state.starRating }
/>

您将需要调整功能，以更改代表星号的局部状态。像这样：

changeRate(name, value) {
    this.props.change(name, value) // function provided by redux-form
    this.setState({ starRating: value })
}