用户交互没有影响，因为<input>withvalueprops被认为是受控的。这意味着显示值完全由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"/>
  );
}

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

更多关于这方面的官方文档

我认为以前的答案可以解决您的问题。但是，我认为该解决方案不需要涉及 React 状态。

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

简单地说，这有效：

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

现在，您可能需要它的输出来做某事。您可以onChange={this.handleChange}在他的回答中使用@xCrZx 所述。但在内部，handleChange您不一定必须更新您的状态。根据您的逻辑，您可以避免增加状态的复杂性，只需在handleChange.

如果你避免更新状态，你可能会保存一些渲染并且你的性能会提高。

我希望上述解决方案可以解决您的问题，我有一种使用钩子的简单方法。

const RangeSlider = () => {

  const [rangeval, setRangeval] = useState(null);

  return (
    <div>
      <input type="range" className="custom-range" min="199" max="3999" 
       onChange={(event) => setRangeval(event.target.value)} />
      <h4>The range value is {rangeval}</h4>
    </div>
  );
};

export default RangeSlider;

试试这个：

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

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