在onDragStop事件中获取材料ui滑块值（反应）

Question

我想触发一个事件，onDragStop而不是在我的React应用程序中onChange使用一个材质的ui Slider（这样事件触发的次数更少）。然而，该文件表明onDragStop函数签名只的MouseEvent： function(event: object) => void。因此，以下适用于onChange：

<Slider onChange={ (e, val) => this.props.update(e, control.id, val) } />

但是，此事件没有第二个参数val：

<Slider onDragStop={ (e, val) => this.props.update(e, control.id, val) } />

如何获取onDragStop函数中Slider的当前值？请注意，我无法使用this，因为它是指父组件。

Answer 1

在较新版本的 Material UI 中，您可以使用：

<Slider
  onChange={} // for example updating a state value
  onChangeCommitted={} // for example fetching new data
/>

Answer 2

<Slider
  // invoked when the user drags the thumb
  onChange={(_, newValue) => update(newValue)}
  // invoked when the user drops the thumb
  onChangeCommitted={(_, newValue) => update(newValue)}
/>

现场演示

Answer 3

还碰到这个问题！如果在类中使用组件，请同时使用两个回调：

<Slider onChange={ (e, val) => this.val = val }  
        onDragStop={ (e) => this.props.update(e, control.id, this.val)
/>