使用 react-input-slider 时 React event.target.value 返回 undefined

Question

I am using the react-input-slider in my codebase currently and am having errors when trying to seek using the slider. It can be found here: https://www.npmjs.com/package/react-input-slider

I am using it like this:

import Slider from 'react-input-slider';

<Slider
 className="clickable-seek-bar"
 axis="x"
 type="range"
 xmin={0}
 xmax={0.999999}
 xstep={0.1}
 x={this.state.played}
 onDragStart={this.handleSeekMouseDown}
 onDragEnd={this.handleSeekMouseUp}
 onChange={this.handleSeekChange}
/>

These are the functions I have:

handleSeekMouseDown(e) {
 this.setState({ ...this.state, seeking: true });
}

handleSeekChange(e) {
 this.setState({ ...this.state, played: parseFloat(e.target.value) });
}

handleSeekMouseUp(e) {
 console.log("TEST", e.target.value);
 this.player.seekTo(parseFloat(e.target.value));
 this.setState({ ...this.state, seeking: false });
}

Whenever I click on the bar, I get an error saying:

(index):33 Uncaught TypeError: Cannot read property 'value' of undefined

I am not sure what is causing this. event.target.value is returning undefined for some reason.

Answer 1

You need to pass e as a parameter when you call the event handler function. It'd be something like this

import Slider from 'react-input-slider';

<Slider
 className="clickable-seek-bar"
 axis="x"
 type="range"
 xmin={0}
 xmax={0.999999}
 xstep={0.1}
 x={this.state.played}
 onDragStart={this.handleSeekMouseDown}
 onDragEnd={this.handleSeekMouseUp}
 onChange={ e => this.handleSeekChange(e)}
/>