Javascript blueprint/react：滑块的自定义标签

我正在尝试使用

labelRenderer

为blueprint滑块创建自定义标签。特别是，向用户显示一些文本，并要求他们在两种情绪之间做出决定（即，真实答案是0或1）。然而，为了获得他们的信心，他们将有一个滑块，我希望他们从中选择一个值

像这样的

所以滑块标签的标签应该从一侧的“100%”变为“100%”

但是，blueprint滑块的

labelRenderer

甚至没有调用

renderLabel

函数，默认标签仍然显示。请注意，我只想更改滑块的标签，我仍然需要实际值介于[0,1]之间，以便后端工作更轻松。下面是我的代码（React.js）：

import{Slider}来自“@blueprintjs/core”；
从“React”导入React；
导出默认类TaskResponse扩展React.Component{
//这是为了使标签介于100%和100%之间
renderLabel=val=>{
log（“渲染标签”，val）；
如果（val==0.5）{
返回“不确定”；
}else if（val==1）{
返回“100%阳性”；
}else if（val==0）{
返回“100%负”；
}否则{
返回`${Math.abs（Math.round（val*100））-50}%`；
}
};
渲染器滑块（播放器）{
const guess=player.round.get（“猜测”）；
返回(
//在用户输入内容之前没有默认值（避免锚定偏差）
);
}
render（）{
const{player}=this.props；
返回(
{this.renderSlider（播放器）}
);
}
}

这是因为我使用的是blueprint/core的旧版本。。特别是，

1.x

它是

renderLabel

，而在

2.x/3.x

中它是

labelRenderer

import { Slider } from "@blueprintjs/core";
import React from "react";

export default class TaskResponse extends React.Component {
  //this is to get the label between 100% & 100%
  renderLabel= val => {
    console.log("render label", val);
    if (val === 0.5) {
      return "Not sure";
    } else if (val === 1) {
      return "100% positive";
    } else if (val === 0) {
      return "100% negative";
    } else {
      return `${Math.abs(Math.round(val * 100)) - 50}%`;
    }
  };

  renderSlider(player) {
    const guess = player.round.get("guess");
    return (
      //no default value until the user inputs something (avoiding anchoring bias)
      <div className={`pt-form-content ${guess === undefined ? "empty" : ""}`}>
        <Slider
          min={0}
          max={1}
          stepSize={0.01}
          labelStepSize={0.25}
          value={guess}
          showTrackFill={false}
          disabled={false}
          labelRenderer={this.renderLabel}
        />
      </div>
    );
  }

  render() {
    const { player } = this.props;

    return (
      <div className="task-response">
        <form onSubmit={this.handleSubmit}>
          <div className="pt-form-group">
            {this.renderSlider(player)}
          </div>

        </form>
      </div>
    );
  }
}