在 React 中为范围添加鼠标向上事件

Question

我正在尝试在我的反应渲染函数中的滑块上创建一个类似 onmouseup 的事件(输入 html 标签，类型=范围(。我很想做

<input id="slider" type="range" min="1" max="100" value={this.state.input_val} onChange={this.handleChange} onmouseup={this.handleSubmit}  />

但不能添加 onmouseup 事件。我尝试的第二件事是添加一个addEventListener，它可能由于所有react的绑定规则而失败。

this.slider.addEventListener('mouseup', e => {
        this.handleSubmit()
});

我希望在我的应用程序中发布滑块时发生一个事件，非常感谢所有帮助。

Answer 1

React 使用"合成事件"，即浏览器本机事件的包装器，以平滑浏览器兼容性。您已经在将一个用于onChange。与 onmouseup 对应的合成事件是 onMouseUp(不同的大小写(：

<input id="slider" type="range" min="1" max="100" value={this.state.input_val} onChange={this.handleChange} onMouseUp={this.handleSubmit}  />

每个本机事件都有一个相应的合成事件。查看 https://reactjs.org/docs/events.html#mouse-events 以获取所有鼠标事件的列表。