javascript - 使用 React 评级组件，如何根据评级显示自定义消息？

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>