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

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

我觉得我在这里缺少什么。

有人可以引导我走正确的路吗？

谢谢

Answer 1

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

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

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

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

如果这段代码有什么问题，请立即发表评论。

在React中更改受控输入的值

1 个答案: