我正试图使用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 />
组件再生。