在React中更改受控输入的值

Question

我正在寻找React控制/非控制/可控输入的一些帮助。

这是一个解释图：

React Slider

正如您在图像中看到的，我有两个组件：

• 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}
/>

我想到的一个可能的解决方案是在受控输入上覆盖新的“过滤器”输入。因此，有两个输入，一个用于显示滑块值，另一个用于输入新值。

我觉得我在这里错过了一些东西。

有没有人可以指导我走正轨？

谢谢，

Answer 1

要使输入可编辑，请尝试以下操作：

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

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

并且不要忘记在构造函数中绑定handleInput。

如果这段代码出现任何问题，请随时评论。