還元反応式と還元型の反応

Question

私は単純なフォームを実装しようとしていますが、コメントを投稿している間に投稿を評価することができます。 githubでreact-ratingが見つかりました。それを私のredux-formに使ってみました。

私は私のStarRatingコンポーネント

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

とchangeRateと呼ばれる機能が私のフォーム内の隠しフィールドの値を変更するためのものです

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

"rating"に設定した名前で、私のフォーム内Field隠しを配置し​​ます星をクリックした後の値に戻します。

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

評価で最初にクリックすると入力の値が変更されますが、選択した星は消えます。 2回目のクリックの後、星は選択されたままになります。

jQueryを使用して非表示フィールドの値を変更しようとしました。 - 星を選択することは適切に機能しましたが、投稿時にフィールド値は還元型の中に含まれませんでした。 jQuery関数とchange関数を組み合わせると、no jQueryと同じ結果になります。

これは何が原因でしょうか？

Answer 1

まず、あなたのようにonChangeコールバックだけでなく、starRatingコンポーネントで変更されている星の数を表すには、dynamic propsが必要です。次のようなものがあります。

<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 }) 
}