onDragStop 이벤트 (반응)에서 소재 UI 슬라이더 값 가져 오기

Question

내 React 앱에서 재료 ui Slider을 사용하여 onChange이 아닌 이벤트 onDragStop을 실행하고 싶습니다. (이벤트가 더 적게 발생하도록). 그러나 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); 
}