javascript - How to update value of range slider with react - Stack Overflow

admin管理员组

文章数量:1425972

showActions(){
    return(
        <div className="action -bar">
            <button className="Button-Edit" onClick={()=>{this.setState({clickedCrop : true})}}> Crop </button> 
            <br/> 
            Brightness : <input type="range" min="0" max="1" value={val_brightness} onChange={() => {this.handleChange}}/>  
            <br/> 
            Blur :<input type="range" min="1" max="5" value={val_blur} onChange={() => {this.handleChange}}/>
            <br/>
            <button className="Button-Edit" onClick={()=>{this.setState({flag_grayscale :true})}}> Grayscale</button>
            &nbsp;&nbsp;
            <button className="Button-Edit" onClick={()=>{this.setState({flag_invert :true})}}> Invert </button>
        </div>
    )
}

showActions(){
    return(
        <div className="action -bar">
            <button className="Button-Edit" onClick={()=>{this.setState({clickedCrop : true})}}> Crop </button> 
            <br/> 
            Brightness : <input type="range" min="0" max="1" value={val_brightness} onChange={() => {this.handleChange}}/>  
            <br/> 
            Blur :<input type="range" min="1" max="5" value={val_blur} onChange={() => {this.handleChange}}/>
            <br/>
            <button className="Button-Edit" onClick={()=>{this.setState({flag_grayscale :true})}}> Grayscale</button>
            &nbsp;&nbsp;
            <button className="Button-Edit" onClick={()=>{this.setState({flag_invert :true})}}> Invert </button>
        </div>
    )
}

• javascript
• reactjs

Share Improve this question Follow edited Mar 10, 2017 at 11:46 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Mar 10, 2017 at 11:42 Mamta SinglaMamta Singla 3711 gold badge11 silver badge11 bronze badge 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Since you are using the onChange method means controlled input, so you need to use the state value to store the changed value, inside the onchange method update state value of respective input element, Check this example how to change slider value, run this snippet:

class App extends React.Component{
 
   constructor(){
       super();
       this.state = {
          val_brightness: '',
          val_blur: ''
       }
   }
   
   handleChange(e){
       let obj = {};
       obj[e.target.name] = e.target.value;
       this.setState(obj);
   }
   
   showActions(){
      return(
        <div className="action -bar"> 
            Brightness : <input type="range" min="0" max="1" name='val_brightness' value={this.state.val_brightness} onChange={(e) => {this.handleChange(e)}}/>  
            <br/> 
            Blur : <input type="range" min="1" max="5" value={this.state.val_blur} name='val_blur' onChange={(e) => {this.handleChange(e)}}/>
        </div>
      )
   }
   
   render(){
      return(
         this.showActions()
      )
   } 
}

ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

In react.js there are two ways to change state of ponents. The remended one is to make child ponent value prop dependent on parent's state and change state of your parent ponent which will lead to re-rendering of the whole ponent.

The hacky way is to change prop of the ponent directly using ref.

I'd remend you to read react.js documentation thoroughly until you'll understand what I mean.

本文标签： javascriptHow to update value of range slider with reactStack Overflow