Reagieren mit redux - react-rating mit redux-form

Question

Ich versuche ein einfaches Formular zu implementieren, wo der Benutzer einen Beitrag bewerten kann, während er einen Kommentar schreibt. Ich habe react-rating auf Github gefunden und wollte es in meinem redux-form verwenden.

ich meine StarRating Komponente

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

und versteckte Field in meinem Formular platzieren mit Namen genannt

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

Funktion in meiner Form auf "rating" gesetzt changeRate bedeutet den Wert des verborgenen Feldes zu ändern zum Wert nach Klick auf die Sterne.

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

Als ich zum ersten Mal klicken Sie auf die Bewertung der Wert der inpute ändert, verschwindet aber die ausgewählten Sterne. Nach einem zweiten Klick bleiben die Sterne ausgewählt.

Ich versuchte, den Wert des ausgeblendeten Felds mithilfe von jQuery zu ändern. - Die Auswahl der Sterne funktionierte einwandfrei, aber der Feldwert wurde beim Buchen nicht in das Redux-Formular übernommen. Die Kombination der Funktionen jQuery und change ergibt dasselbe Ergebnis wie ohne jQuery.

Was könnte das verursachen?

Answer 1

Zunächst benötigen Sie einige dynamic props, um die Anzahl der Sterne, die sich in Ihrer StarRating-Komponente ändert, und nicht nur den OnChange-Callback wie Sie getan haben. Etwas wie das:

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

Sie müssen Ihre Funktion anpassen, um auch den lokalen Zustand zu ändern, der die Sternzahlen darstellt. Etwas wie das:

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