whitebear
whitebear

Reputation: 12461

How to distinguish callback from multiple component

I made two Slider class like this

    <Slider
      sliderNum="0"
      min={0} max={1} step={0.1}
      orientation="vertical"
      defaultValue={0.8}
      aria-labelledby="vertical-slider"
      onChange={this.handleVoSliderChange}
    /> 
   <Slider
      sliderNum="1"
      min={0} max={1} step={0.1}
      orientation="vertical"
      defaultValue={0.8}
      aria-labelledby="vertical-slider"
      onChange={this.handleVoSliderChange}
    />

then, in callback, how can check which is which ??

handleVoSliderChange(event,value){
  console.log(event);
}

I am checking the event but it looks like mouse event.

and value also doesn't work for this purpose.

Upvotes: 0

Views: 40

Answers (1)

alewis729
alewis729

Reputation: 416

Add a sliderNum parameter to your handler.

handleVoSliderChange(event, value, sliderNum){
  console.log(sliderNum);
  // ...
}
<>
  <Slider
    sliderNum="0"
    onChange={(event, value) => this.handleVoSliderChange(event, value, 0)}
  />
  <Slider
    sliderNum="1"
    onChange={(event, value) => this.handleVoSliderChange(event, value, 1)}
  />
</>

Upvotes: 1

Related Questions