在 React 中更改受控输入的值答案

【问题标题】：Change value of controlled input in React在 React 中更改受控输入的值
【发布时间】：2019-02-22 00:03:19
【问题描述】：

我正在寻找有关 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}
/>

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

我觉得我在这里遗漏了一些东西。

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

谢谢，

【问题讨论】：

现在有什么问题？滑块是否改变输入的值，输入是否改变滑块的值？
目前，文本输入不可编辑。如果我通过删除 value 属性并设置 defaultValue 来使其可编辑，则问题是文本输入不再遵循 this.state.sliderValue 的值。但是，如果我保留 value 属性，则输入不可编辑，这意味着输入不能用于输入新的滑块值
将onChange 添加到您的输入中，<input className={amountInput} onChange={this.handleChangeSlider} />
谢谢@seethrough。我试过这个。输入仍然显示滑块值。但是输入值仍然不可编辑，当我按任意键时，值变为 [object Object]
好的，我明白了。答案有点复杂，无法评论，我会给出答案。

标签： reactjs input state

【解决方案1】：

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

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

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

别忘了在你的构造函数中绑定handleInput。

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

【讨论】：

@Barney 我给你发了一封电子邮件。谢谢。