如何让HTML对象上的事件侦听器与React相处？
如何让HTML对象上的事件侦听器与React相处？
提问于 2019-04-15 00:45:17
我正在尝试将VexFlow库包装在一个react组件中，以创建一个绘制乐谱的应用程序。
在VexFlow中，有notehead对象，所以我的想法是绘制所有的notehead，并为它们添加事件侦听器，然后使用提交来调用一些graphql函数来更新乐谱。
所以，需要明确的是，在包装VexFlow库的组件中，在我的componentDidMount()中，在做完所有笔记之后，我得到了笔记：
const notes = div.getElementsByClassName("vf-notehead");对它们进行迭代：
for(let i = 0; i < notes.length; i++){
let note = notes[i];并添加一个试图提交的事件侦听器调用提交属性：
note.addEventListener("mouseUp", function() {
this.index = i; // Hope this works, sometimes closures are weird
if(this.props.sheet.keyIndexes.includes(this.index)){
this.props.sheet.keyIndexes.splice(this.state.keyIndexes.indexOf(this.index), 1);
}else{
this.props.sheet.keyIndexes.push(this.index);
}
this.props.submit(this.props.sheet.id, this.props.sheet.keyIndexes); // updateProps and redraw canvas
});但这是默默的失败。坦率地说，这看起来有点老生常谈。有没有更好的方法来做这件事？我知道这对相同笔记的其他事件处理程序也有效。我非常确定失败的关键是试图连接回react。
回答 1
Stack Overflow用户
发布于 2019-04-15 01:43:09
尝尝这个。
notes[i].addEventListener("mouseUp", function() {
this.index = i; // Hope this works, sometimes closures are weird
if(this.props.sheet.keyIndexes.includes(this.index)){
this.props.sheet.keyIndexes.splice(this.state.keyIndexes.indexOf(this.index), 1);
}else{
this.props.sheet.keyIndexes.push(this.index);
}
this.props.submit(this.props.sheet.id, this.props.sheet.keyIndexes); // updateProps and redraw canvas
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55677693
复制相关文章
相似问题
腾讯云开发者
