Mit der React Rating-Komponente, wie eine benutzerdefinierte Nachricht basierend auf der Bewertung angezeigt wird?

Question

Ich verwende derzeit die react-rating component, um meinen Benutzern eine 1-5 Sterne-Bewertung zu ermöglichen.

In meiner Render-Funktion habe ich folgendes:

 <Rating 
     fractions={2} 
     onRate={(rate) => document.getElementById('label-onrate').innerHTML = rate || ''} 
     /> 
     <span class="label label-default" id="label-onrate"></span> 

Das gibt 5 Sterne, und wenn Sie über einen Stern schweben wird der #label-onrate Text dem Benutzer die Bewertung Wert aktualisiert, um anzuzeigen ...

Was ich tun muss, ist den Text zu aktualisieren, aber nicht mit dem Rating-Wert, sondern mit einer benutzerdefinierten Nachricht pro Rating-Wert.

Wie kann ich eine benutzerdefinierte Nachricht für jeden Bewertungswert definieren und diese Nachricht in #label-onrate angezeigt werden?

Dank

Answer 1

einen Ereignishandler für Ratenänderung Erstellen und den Label-onrate Text in einem Zustand halten. Sie müssen das DOM nicht direkt mit React modifizieren. Wenn Sie den Status aktualisieren, werden Ihre Komponenten neu gerendert. Etwas wie dieses:

state = { 
    label: "initial" 
    }; 
    ... 
    onRateChange = (rate) => { 
     if(rate === 1) 
     this.setState({label: "new text"}); //Triggers render 
    } 
    ... 
    <Rating 
    fractions={2} 
    onRate={(rate) => this.onRateChange(rate)} 
    /> 
    <span class="label label-default" id="label-onrate">{this.state.label}</span>