план / реагировать: пользовательские метки для слайдера - PullRequest
Новая
       28

план / реагировать: пользовательские метки для слайдера

0 голосов
/ 21 мая 2018

Я пытаюсь создать пользовательские метки для ползунка чертежа, используя labelRenderer.В частности, пользователям показывается некоторый текст, и им предлагается выбирать между двумя настроениями (т. Е. Истинный ответ - 0 или 1).Однако, чтобы завоевать их доверие, у них будет ползунок, из которого я хочу, чтобы они выбирали значение.

Примерно так enter image description here

Значенияметки ползунка должны переходить от «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>
    );
  }
}

1 Ответ

0 голосов
/ 21 мая 2018

Это потому, что я использовал более старую версию blueprint / core. В частности, 1.x это renderLabel, а в 2.x/3.x это labelRenderer

...