JSX React HTML5 输入滑块不起作用 [英] JSX React HTML5 Input Slider Doesn't Work

问题描述

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

I'm using React.JS for a build, and am building a range input slider with two choices for a component.

这是我的代码:

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

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

When I place it into my client side rendering component and try to toggle it it does not move at all. Testing it onto a JS/PHP build I have going on, it works fine.

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

Why does this not work in JSX/React.JS and what would be a suggested work around?

谢谢！

推荐答案

用户交互无效，因为带有 value 属性的 被视为 控制.这意味着显示值完全由 render 函数控制.因此，要实际更新输入值，您应该使用 onChange 事件.示例:

User interactions have no effect because an <input> with value prop is considered as controlled. It means that displayed value is controlled entirely by render function. So to actually update input value you should use the onChange event. Example:

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.在这种情况下， 被认为是不受控制的，任何用户交互都会立即由元素本身反映，而无需调用组件的 render 函数.

You can also use defaultValue instead of value. In this case <input> is considered as uncontrolled and any user interactions are immediately reflected by element itself without invoking render function of your component.

在官方文档

这篇关于JSX React HTML5 输入滑块不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！