输入范围设定值不更新拇指显示答案

【问题标题】：input range set value doesn't update thumb display输入范围设定值不更新拇指显示
【发布时间】：2019-11-29 14:55:42
【问题描述】：

我有一个输入范围：

<input type="range" value="10" min="0" max="100"></input>

我用虚拟 dom 渲染它并更改 value 属性，使其变为：

<input type="range" value="50" min="0" max="100"></input>

但是拇指显示没有更新。如何更改输入范围的值以更新拇指显示。

function view(newValue) {
  return h('input', { attrs: { value: newValue } });
}

【问题讨论】：

我们很清楚，我们应该避免直接从 React 外部改变 value 属性。你能分享你提到的拇指显示器的代码吗？
拇指显示我的意思是你在页面上滑动的东西。它没有特殊的代码。
我改变了虚拟dom上的value属性，不是我自己直接操作dom的@ChristopherNgo
您能解释一下如何更新值吗？你的意思是在你的虚拟 dom 上更新它吗？

标签： javascript html reactjs virtual-dom

【解决方案1】：

如果您想要更新range 输入，则它必须是一个受控组件（我的意思是他的值必须是和state），如下所示：

<input
  type="range"
  value={rangeValue}
  onChange={this.handleRangeChange}
  min="0"
  max="100"
  list="tickmarks"
>
</input>

为了存储值，你必须把它放在一个onChange函数：

 handleRangeChange = e => {
   if (e && e.target && e.target.value) {
     console.log(e.target.value)

     this.setState({ rangeValue: e.target.value });
   }
 }

这必须更新范围输入的拇指。

【讨论】：