JSX React HTML5输入滑块不起作用

Question

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

这是我的代码:

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

当我将它放入我的客户端渲染组件并尝试切换它时它根本不移动.测试它到我已经进行的JS/PHP构建,它工作正常.

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

谢谢!

Answer 1

用户交互没有任何效果,因为<input>与value道具被视为控制.这意味着显示的值完全由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组件的功能.

更多关于官方文档的内容

Answer 2

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

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

简单地说，这有效：

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

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

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

Answer 3

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

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;