Изменить значение контролируемого входа в React - PullRequest
Новая
       8

Изменить значение контролируемого входа в React

0 голосов
/ 18 сентября 2018

Мне нужна помощь по контролируемым / неуправляемым / контролируемым входам.

Вот диаграмма, чтобы объяснить:

Реактивный ползунок

Как вы можете видеть на картинке, у меня есть два компонента:

  • Компонент Slider: ранжированный вход от 0 до 50000.
  • Второй компонент - это текстовый ввод. В настоящее время это только для чтения и отображает значение ползунка.

Что я хочу сделать

  • Ввод текста в настоящее время является контролируемым компонентом . Вместо этого я хотел бы сделать так, чтобы пользователь мог вводить текстовое поле. Если добавляемый текст является числом и от 0 до 50 000, значение состояния ползунка будет обновлено до введенного значения ввода текста.

Вот мой код: 

  state = {
    sliderValue: 10000
  }

handleChangeSlider = value => {
    this.setState({
      sliderValue: value
    })
  }


<Slider
min={5000}
max={45000}
step={250}
value={this.state.sliderValue}
onChange={this.handleChangeSlider}
/>

<input
className={amountInput}
value={this.state.sliderValue}
/>

Одним из возможных решений этой проблемы, о котором я подумал, является наложение нового входа «фильтра» на контролируемый вход. Таким образом, есть два входа, один для отображения значения ползунка и один для ввода нового значения.

Я чувствую, что здесь чего-то не хватает.

Есть ли кто-нибудь, кто может направить меня по правильному пути?

Спасибо

1 Ответ

0 голосов
/ 18 сентября 2018

Чтобы сделать ввод редактируемым, попробуйте следующее: 

handleInput = event => {
  this.setState({sliderValue: event.target.value})
} 

<input className={amountInput} value={this.state.sliderValue} onChange={this.handleInput}/>

и не забудьте связать handleInput в вашем конструкторе.

Не стесняйтесь комментировать, если что-то пойдет не так с этим фрагментом кода.

...