React Input Range更新状态缓慢

React Input Range updating state slowly

本文关键字：状态 缓慢 更新 Range Input React      更新时间：2023-09-26

我正试图使用type="range"的html元素来制作一个范围滑块，当我来回滑动时，它会更新状态值。如果我只是在onInputChange()中控制台.log e.target.value而不设置状态，它会很顺利地工作，但如果我尝试使用e.target.value设置state，它会滞后太多，以至于无法使用。我也尝试过在内部设置value={this.state.rangeValue}，但没有成功。以下是相关代码的示例：

export default class App extends Component {
   constructor() {
   super();
   this.onInputChange = this.onInputChange.bind(this);
   this.state = {
     rangeValue: 50
   }
 }
onInputChange(e) {
   this.setState({ rangeValue: e.target.value});
}
render() {
   var {rangeValue} = this.state;
  // this logs unbearably slow and I want to be able to pass this value 
  // to a child component as a prop as it updates
  console.log(rangeValue)
  return (
     <div className="map-controls">
        <input type="range" onChange={this.onInputChange}></input>
        <ExampleComponent rangeValue={this.state.rangeValue} />
     </div>
  );
 }
}

我想知道我的包是否能帮你？

https://github.com/bluebill1049/react-smooth-range-input

import react from 'react';
import Slider from 'react-smooth-range-input';
export default () => <Slider value={1} min={1} max={30} onChange={/** you can put your callback here */} />;

@user3737841您似乎正在更新onInputChange()处理程序上组件的状态。每次更改输入范围滑块的步长值时，都会调用setState并重新渲染。这对于在每次输入更改时重新渲染来说是非常昂贵的。

如果避免更新状态，则可能会保存一些渲染，并且性能会有所提高。

您也可以使用defaultValue而不是value。然后<input>被视为uncontrolled，任何用户交互都会立即由元素本身反映出来，而无需调用组件的呈现函数。

只需将value={this.state.rangeValue}替换为defaultValue={this.state.rangeValue}即可。将滑块value作为prop传递到组件state的<ExampleComponent />组件再生。

相关文章：