Javascript 如何使用react更新范围滑块的值

在react.js中，有两种方法可以更改组件的状态。 建议的方法是使子组件值prop依赖于父组件的状态，并更改父组件的状态，这将导致重新渲染整个组件

黑客的方法是直接使用ref更改组件的属性

我建议您仔细阅读react.js文档，直到理解我的意思。

因为您使用的是onChange方法means，所以需要使用state值来存储更改后的值，在相应输入元素的onChange方法update state值内，检查此示例如何更改滑块值，运行以下代码段：

类应用程序扩展了React.Component{ 建造师{ 超级的 此.state={ 亮度：， 瓦卢·布勒： } } 手电筒{ 设obj={}； obj[e.target.name]=e.target.value； 这是我的目标； } 表演{ 回来 亮度：{this.handlechange}}/> 模糊：{this.handlechange}}/> } 渲染{ 回来 这是表演 } } ReactDOM.render，document.getElementById'app'

---

这篇文章正是我需要的。它包含onChange处理程序所需的语法：onChange={e=>{this.handlechange}，然后您只需要创建该方法，这是我的：handleprofilescalechange{this.setState{profileScale:Numbere.target.value}}e.target.value是范围滑块的当前值。

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>
    )
}