小编典典

JSX React HTML5输入滑块不起作用

reactjs

我正在使用React.JS进行构建,并且正在构建具有两个选择组件的范围输入滑块。

这是我的代码:

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

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

为什么这在JSX / React.JS中不起作用,建议如何解决?

谢谢!


阅读 286

收藏
2020-07-22

共1个答案

小编典典

用户交互无效,因为<input>with 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组件的功能。

官方文档中的更多内容

2020-07-22