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

Posted 2021-04-12

我想在我的React应用程序中使用材料ui onDragStop发射事件onChange而不是Slider（以便事件触发的次数更少）。然而，documentation表明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，因为它引用了父组件。

答案

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

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

另一答案

如果您希望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);
}