在 React 中更改受控输入的值

Posted 2023-02-22

【中文标题】在 React 中更改受控输入的值

【英文标题】：Change value of controlled input in 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]

好的，我明白了。答案有点复杂，无法评论，我会给出答案。

【参考方案1】：

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

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

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

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

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

【讨论】：

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