onDragStopイベントの材料スライダの値を取得する（反応する）

Question

ではなく、のイベントを発生させたいです。ただし、documentationは、onDragStopファンクションシグネチャにのみmouseevent：function(event: object) => voidがあることを示しています。だから、onChangeと、次の作品：私はスライダーの現在の値を取得できますか

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

：

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

しかし、このイベントは、二番目のパラメータvalを持っていませんonDragStopは機能しますか？注：親コンポーネントを参照するので、thisは使用できません。

Answer 1

この問題も発生しました。あなたはSlider値は、コンポーネントの状態の一部になりたい場合は、例えば、

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

Answer 2

：あなたは、クラス内でコンポーネントを使用する場合は、両方のコールバックを使用それは（これは、同様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); 
}