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"/>
);
}
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.
More on this in official documentation