我正在使用React.JS进行构建,并且正在构建具有两个选择组件的范围输入滑块。
这是我的代码:
<input id="typeinp" type="range" min="0" max="5" value="3" step="1"/>
当我将其放入客户端渲染组件并尝试进行切换时,它根本不会移动。将其测试到我正在进行的JS / PHP构建中,效果很好。
为什么这在JSX / React.JS中不起作用,建议如何解决?
谢谢!
用户交互无效,因为<input>with value道具被认为是 受控的 。这意味着显示值完全由render功能控制。因此,要实际更新输入值,您应该使用onChange事件。例:
<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组件的功能。
defaultValue
官方文档中的更多内容