Geek Answers Handbook

JSX React HTML5 Input Slider Not Working

I use React.JS to build and create a range input slider with two options for the component.

this is my code:

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

When I put it in a client-side rendering component and try to switch it, it doesn't move at all. Testing it on the JS / PHP assembly, I continue to work, it works fine.

Why does this not work in JSX / React.JS and what will be the proposed work?

Thank!

+4
source share
3 answers

, <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"/>
  );
}

dafaultValue value. <input> , render .

+16

:

onInput() {
    var input = document.getElementById("typeinp");
    var currentVal = input.value;
    this.setState({
      value: currentVal
    })
}

<input id="typeinp" type="range" min="0" max="5" step="1" defaultValue="3" onInput={this.onInput.bind(this)}/>

value = "3" defaultValue = "3" , , "3" . onInput , . , , .

0

, . , , React.

, , , 3, @Colin Whitmarsh.

:

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

Now you probably need his way out to do something. You can use onChange={this.handleChange}like @xCrZx in your answer. But inside handleChangeyou do not have to update your state. Depending on your logic, you can avoid increasing the complexity of your state and simply encode your logic inside handleChange.

If you do not update the state, you will probably save some renders and your performance will improve.

0
source

More articles:


All Articles