Javascript JSX React HTML5输入滑块不'；行不通

我正在使用React.JS进行构建，并且正在构建一个范围输入滑块，其中包含两个组件选项

这是我的代码：

<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/>

当我将其放入客户端渲染组件并尝试切换时，它根本不会移动。在我正在进行的JS/PHP构建中进行测试，效果很好

为什么这在JSX/React.JS中不起作用？建议的解决方法是什么

谢谢

试试这个：

onInput() {
    var input = document.getElementById("typeinp");
    var currentVal = input.value;
    this.setState({
      value: currentVal
    })
}

<input id="typeinp" type="range" min="0" max="5" step="1" defaultValue="3" onInput={this.onInput.bind(this)}/>

onInput（）{
var输入=document.getElementById（“typeinp”）；
var currentVal=输入值；
这是我的国家({
值：currentVal
})
}

---

我建议将value=“3”更改为defaultValue=“3”，否则我认为该值已硬编码为“3”，可能很难或不可能更改。onInput函数查找该值并将其添加到状态，以便将数据传递给另一个组件或函数。可能有一个更优雅的解决方案来解决您的问题，但上述方法应该可以奏效

用户交互没有影响，因为带有

值的
道具被视为受控的。这意味着显示值完全由
render
功能控制。因此，要实际更新输入值，应该使用
onChange
事件。例如：

getInitialState: function() {
  return {value: 3};
},
handleChange: function(event) {
  this.setState({value: event.target.value});
},
render: function() {
  return (
    <input 
      id="typeinp" 
      type="range" 
      min="0" max="5" 
      value={this.state.value} 
      onChange={this.handleChange}
      step="1"/>
  );
}

getInitialState:function（）{
返回{value:3}；
},
handleChange:函数（事件）{
this.setState（{value:event.target.value}）；
},
render:function（）{
返回(
);
}

您也可以使用
defaultValue
而不是
value
。在这种情况下，
被认为是不受控制的，任何用户交互都会立即由元素本身反映出来，而无需调用组件的
呈现
功能

关于这一点，我想前面的答案可以解决你的问题。然而，我认为解决方案不需要涉及反应状态

冻结输入滑块的唯一原因是您已经将其值硬编码为3，正如@Colin Whitmarsh所建议的那样

简单地说，这是可行的：

<input id="typeinp" type="range" min="0" max="5" defaultValue="3" step="1"/>



现在，您可能需要它的输出来执行某些操作。您可以使用@xCrZx在其答案中所述的
onChange={this.handleChange}
。但是在
handleChange
中，您不必更新您的状态。根据您的逻辑，您可以避免增加状态的复杂性，只需在
handleChange
中对逻辑进行编码

如果避免更新状态，可能会保存一些渲染，性能也会提高。
这里有一个解决方案，可以在传递事件处理程序的情况下生成多个滑块，甚至一个滑块
我们可以简单地使用类型为Range的HTML输入
不要发送事件处理程序
onChange
或
onAfterChange
它们隐式发送滑块的值，因此我们无法处理滑块的形式或动态创建它们


更多信息，我们可以查看和CSS提供的


类滑块示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
滑块标签：[“A”、“B”、“C”、“D”]，
自定义权重总和：0，
滑块权重：[]
};
}
componentDidMount（）{
常量slidersLabels=this.state.slidersLabels；
常量滑块权重=[]；
对于（变量i=0；i
输入[类型=范围]{
-webkit外观：无；
利润率：18px0；
宽度：100%；
}
输入[类型=范围]：焦点{
大纲：无；
}
输入[类型=范围]：-webkit滑块可运行轨迹{
宽度：100%；
高度：8.4px；
光标：指针；
动画：0.2s；
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
背景#3071a9；
边界半径：1.3倍；
边框：0.2px实心#010101；
}
输入[类型=范围]：-webkit滑块拇指{
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
边框：1px实心#000000；
高度：36px；
宽度：16px；
边界半径：3px；
背景：#ffffff；
光标：指针；
-webkit外观：无；
利润上限：-14px；
}
输入[类型=范围]：焦点：--webkit滑块可运行轨迹{
背景：#367ebd；
}
输入[类型=范围]：-moz范围轨迹{
宽度：100%；
高度：8.4px；
光标：指针；
动画：0.2s；
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
背景#3071a9；
边界半径：1.3倍；
边框：0.2px实心#010101；
}
输入[类型=范围]：-moz范围拇指{
盒影：1px 1px 1px#000000，0px 0px 1px#0d0d；
边框：1px实心#000000；
高度：36px；
宽度：16px；
边界半径：3px；
背景：#ffffff；
光标：指针；
}
输入[类型=范围]：-ms轨道{
宽度：100%；
高度：8.4px；
光标：指针；
动画：0.2s；
背景：透明；
边框颜色：透明；
边框宽度：16px0；
颜色：透明；
}
输入[类型]