html - 在反应中为范围添加 mouseup 事件

Question

我正在尝试在我的反应渲染函数中的滑块（输入带有 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()
});

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

score 2 · Accepted Answer

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

1 回答 1