React Nouislider - Проблемы с onChange и setState, ползунок сбрасывается в 0, и нет значения в состоянии - PullRequest
Новая
       10

React Nouislider - Проблемы с onChange и setState, ползунок сбрасывается в 0, и нет значения в состоянии

0 голосов
/ 05 июля 2018

Я создаю простое приложение с React, мои знания о React около недели заставить это работать.

Я использую версию Nouislider для React: https://github.com/algolia/react-nouislider

И ссылка на оригинальную документацию по Nouislider здесь: https://refreshless.com/nouislider/

Я могу создать слайдер и запустить функцию, используя реквизит onChange. Сначала я зарегистрировал вывод на консоль и убедился, что значение верное. Однако в тот момент, когда я пытаюсь обновить состояние с помощью this.setState, он возвращает ползунок обратно в 0, и состояние получает неопределенное значение вместо значения ползунка.

Вот мой текущий код:

Конструктор: 

constructor(props) {
  super(props);
  this.state = {
    matchWinnerScore: "",
  }
  this.handleWinnerClick = this.handleWinnerClick.bind(this);
}

Ползунок внутри функции рендеринга: 

<Nouislider
    start={[0]}
    connect={[true, false]}
    step={1}
    range={{ min: 0, max: 30 }}
    onChange={this.handleWinnerScoreChange}
/>

Функция onChange: 

handleWinnerScoreChange(event) {
  console.log(event[0]);
  this.setState({
       matchWinnerScore: event[0]
    });
  console.log(this.matchWinnerScore);
}

В консоли вывод: 

14.00
undefined

Любая помощь, мысли или советы приветствуются. Я врезался в кирпичную стену, и мне нужны свежие глаза, чтобы направить меня в правильном направлении.

Ждем ваших ответов!

1 Ответ

0 голосов
/ 02 декабря 2018

У меня была такая же проблема с этой библиотекой: https://github.com/leongersen/noUiSlider

К сожалению, мне пришлось создать дочерний компонент для моего текста (или к чему бы вы ни привязывали значение слайдера) с помощью ссылки. Это работает, но, очевидно, не идеально использовать ref для такого базового компонента.

Родительский компонент (показан только соответствующий) 

  onChangeSlide = (values, handle, unencoded, tap, positions) => {
    let { challengeObject } = this.props;

    this.refs['ProgressText' + challengeObject.id].updateProgress(parseInt(values[0]))
  }

  componentDidMount = () => {
    let uiSlider = this.refs['NoUiSlider' + challengeObject.id].slider
    uiSlider.on('update', this.onChangeSlide);
    uiSlider.on('end', function () {
      //save it to db
    });
  }

  render() {
    const { classes, challengeObject } = this.props;

    return (
      <div>
        <Nouislider
          ref={'NoUiSlider' + challengeObject.id}
          start={[challengeObject.progress['startValue']]}
          connect={[true, false]}
          step={1}
          range={{
            min: 0,
            max: challengeObject.progress['targetValue'] 
          }}
        />

        <ProgressText
          ref={'ProgressText' + challengeObject.id}
          startValue={challengeObject.progress['targetValue']}
          endValue={challengeObject.progress['targetValue']}
        />
      </div>
    );
  }

дочерний компонент 

import React from "react";

class ProgressText extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
        startValue: this.props.startValue
    }
  }

  updateProgress = (val) => {
      this.setState({ startValue: val })
  }

  render() {
    let { endValue } = this.props;
    let { startValue } = this.state

    return (
        <span>  
            {startValue + '/' + endValue}
        </span>
    );
  }
}

export default ProgressText;
...