reactjs - 在 React 中更改受控输入的值

Question

我正在寻找有关 React 受控/不受控/可控输入的帮助。

这里有一张图来解释：

反应滑块

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

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

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

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

有没有人可以引导我走上正确的道路？

谢谢，

标签： reactjsinputstate

Answer 1

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

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

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

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

如果这段代码有任何问题，请随时发表评论。