如何减少反应中的更新

我在我的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)}
/>

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/3819.html

(0)
上一篇 2022年6月29日 下午4:36
下一篇 2022年6月29日 下午4:36

相关推荐

发表评论

登录后才能评论