如何减少反应中的更新

我在我的react web应用程序中有这个滑块组件。

<InputRange
    minLabel="none"
    maxLabel="none"
    maxValue={5000}
    minValue={0}
    value={filterstate.minPay}
    onChange={value => inputChange(value)}
/>

这个onchange事件被频繁地调用，我们可以看到在 文件

我可以使用onchangecomplete事件来设置只有当变化完成时的状态。

<InputRange
    minLabel="none"
    maxLabel="none"
    maxValue={5000}
    minValue={0}
    value={filterstate.minPay}
    onChangeComplete={value => inputChange(value)}
/>

但它会抛出很多错误。

index.js:1 Warning: Failed prop type: The prop `onChange` is marked as required in `InputRange`, but its value is `undefined`.

input-range.jsx:294 Uncaught TypeError: this.props.onChange is not a function
    at InputRange.updateValues (input-range.jsx:294)
    at InputRange.updatePositions (input-range.jsx:265)

解决方案：

正如它所说的’onChange’是需要的，但你不需要在里面做任何事情。你可以使用这样的方法。

<InputRange
    minLabel="none"
    maxLabel="none"
    maxValue={5000}
    minValue={0}
    value={filterstate.minPay}
    onChange={() => {}}
    onChangeComplete={value => inputChange(value)}
/>