使用React Rating Component，如何根據評分顯示自定義消息？

Question

我目前在使用react-rating component來允許我的用戶提供1-5星評級。

在我的渲染功能，我有以下幾點：

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

這將返回5星，而當你將鼠標懸停在一星#label-onrate文本被更新，以顯示用戶評定值...

我需要做的是更新文本，但不是用評分值，而是用每個評分值的自定義消息。

如何爲每個評級值定義一條自定義消息並讓該消息出現在#label-onrate？

感謝

Answer 1

創建率變化的事件處理程序，並保持在一個狀態的標籤onrate文本。您不需要直接用React修改DOM。在更新狀態時，組件將被重新渲染。類似這樣的：

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>