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

为速率更改创建事件处理程序，并将标签文本保持在状态。您不需要使用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>

使用React Rating Component，如何根据评级显示自定义消息？

1 个答案: