如何使用 React-native-range-slider 在触摸结束时设置状态答案

【问题标题】：How to setState upon upon touch end with React-native-range-slider如何使用 React-native-range-slider 在触摸结束时设置状态
【发布时间】：2021-01-14 01:08:35
【问题描述】：

我正在使用 rn-range-slider 包 (https://www.npmjs.com/package/rn-range-slider)，目前正在使用 onValueChanged 道具，如下所示：

<RangeSlider
...otherProps
onValueChanged={(low, high, fromUser) => {
                setSelectedTime(low);
              }}
/>

问题是这会为每一步设置状态，例如当从 30 滑到 80 时，为每一步添加设置状态（在我的情况下，步 = 5），所以 30、35、40、... 80。

我只想在用户从滑块上松开手指时设置状态，即最终数字。有一个名为“onTouchEnd”的回调道具，但是当我在上面的代码示例中将它替换为“onValueChanged”时，它给了我错误：

错误：对象作为 React 子对象无效（发现：对象与键 {dispatchConfig、_targetInst、_dispatchListeners、_dispatchInstances、类型、目标、currentTarget、eventPhase、气泡、可取消、timeStamp、defaultPrevented、isTrusted、nativeEvent、isDefaultPrevented、 isPropagationStopped}）。如果您打算渲染一组子项，请改用数组。

【问题讨论】：

标签： javascript react-native

【解决方案1】：

很遗憾，您不能使用 onTouchEnd() 回调来获取更改的值。

这两个回调（onTouchEnd、onTouchStart）只能用于dispatch函数。

例如...

<RangeSlider
...otherProps
onValueChanged={(low, high, fromUser) => {
                setSelectedTime(low);   // This value will be saved in state/elsewhere
              }}
onTouchEnd={() => {updateModelPrediction();}}  // In updateModelPred() you would run an analysis or something else
/>

updateModelPrediction 会执行以下操作...

updateModelPrediction(){
    // Grab values from where saved/state
    low, high = {this.state}
    // Do something with number

}

【讨论】：