如何使用React本机范围滑块在触摸结束时设置状态

Question

我正在使用rn范围滑块包(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、_TargetList、_dispatchListeners、_dispatchInstances、类型、目标、currentTarget、eventPhase、气泡、可取消、时间戳、defaultPrevented、isTrusted、nativeEvent、isDefaultPrevented、isPropagationStopped}的对象）。如果要呈现子对象集合，请改用数组。

Answer 1

不幸的是，您不能使用onTouchEnd（）回调来获取更改的值。

这两个回调函数（onTouchendonTouchStart）只能用于分派函数。

例如

<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(){
    // Grab values from where saved/state
    low, high = {this.state}
    // Do something with number

}