javascript - JSX React HTML5 输入 slider 不工作

Question

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

这是我的代码:

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

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

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

谢谢!

Answer 1

用户交互无效，因为 <input>与 value prop 被视为受控。这意味着显示的值完全由 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>被视为不受控制，并且任何用户交互都会立即由元素本身反射(reflect)出来，而无需调用 render组件的功能。

官方 documentation 中有更多相关信息