在事件范围内添加mouseup事件

Question

我正在尝试在我的react render函数的滑块（带有type = range的输入html标签）上创建类似onmouseup的事件。我很想做

<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以获得所有鼠标事件的列表。