在 onDragStop 事件中获取 MUI Slider 值

Posted 2023-02-18

【中文标题】在 onDragStop 事件中获取 MUI Slider 值

【英文标题】：Get MUI Slider value in onDragStop event

【发布时间】：2018-05-06 12:11:08

【问题描述】：

我想在我的 React 应用程序中使用 MUI Slider 触发事件 onDragStop 而不是 onChange（这样事件触发的次数会更少）。但是，documentation 表示onDragStop 函数签名只有鼠标事件：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，因为它指的是父组件。

【参考方案1】：

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

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

【讨论】：

这个答案是新的最佳答案。

【参考方案2】：

也遇到了这个问题！如果您在类中使用组件，请同时使用两个回调：

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

【参考方案3】：

如果您希望 Slider 值成为组件状态的一部分，例如要在 Slider 更改时触发重新渲染（这也需要您将 this.state.value 传递给 Slider），您可以这样做：

class Parent extends Component 
    render() 
        return <Slider value=this.state.value onChange=this.handleChange onDragStop=this.handleDragStop/>
    

    handleChange = (event, value) => this.setState( value );

    handleDragStop = () => this.props.update(this.state.value);

否则您可以将值分配给this：

class Parent extends Component 
    render() 
        return <Slider onChange=this.handleChange onDragStop=this.handleDragStop/>
    

    handleChange = (event, value) => this.value = value;

    handleDragStop = () => this.props.update(this.value);

【参考方案4】：

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

现场演示