Question

我正在尝试使用带有type="range"的html元素来创建一个范围滑块，它会在我来回滑动时更新状态值。如果我只是在e.target.value内调试{。{1}}而不设置状态，它会顺利运行，但是如果我尝试使用e.target.value设置setState，它会落后太多而无法使用。我也试过在里面设置onInputChange()但没有成功。以下是相关代码的示例：

value={this.state.rangeValue}

Answer 1

我想知道我的包裹是否可以帮助您？

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 */} />;

Answer 2

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

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

您也可以使用defaultValue代替value。然后<input>被认为是uncontrolled，任何用户交互都将立即由元素本身反映出来，而无需调用组件的渲染功能。

只需将value={this.state.rangeValue}替换为defaultValue={this.state.rangeValue}。将滑块value作为prop传递到<ExampleComponent />组件，而无需考虑组件state。

反应输入范围缓慢更新状态

2 个答案: