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

Question

我正在尝试使用labelRenderer为蓝图滑块设置自定义标签。特别地，向用户显示一些文本，并且要求他们在两种情绪之间作出决定（即，真实答案是0或1）。但是，为了获得他们的信心，他们将有一个滑块，我希望他们从中选择一个值。

像这样的东西

因此滑块标签的标签应从一侧的“100％”变为“100％”

但是，蓝图滑块labelRenderer甚至没有调用renderLabel函数，仍会显示默认标签。请注意，我只想更改滑块的标签，我仍然需要实际值介于[0,1]之间，以便后端工作更轻松。这是我的代码（React.js）：

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>
    );
  }
}

Answer 1

这是因为我使用的是旧版蓝图/核心..特别是1.x renderLabel 2.x/3.x labelRenderer是<!-- Dropdown Structure --> <ul id="dropdown1" class="dropdown-content"> <li><a href="#!">one</a></li> <li><a href="#!">two</a></li> <li class="divider"></li> <li><a href="#!">three</a></li> </ul> <nav> <div class="nav-wrapper"> <a href="#!" class="brand-logo">Logo</a> <ul class="right hide-on-med-and-down"> <li><a href="sass.html">Sass</a></li> <li><a href="badges.html">Components</a></li> <!-- Dropdown Trigger --> <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li> </ul> </div> </nav>