Javascript 在react应用程序中进行上下文感知复制和粘贴

我正在构建一个react应用程序，允许用户复制和粘贴文本（从一个输入字段到另一个输入字段），以及复制列表中的列表项

现在我想为这两个用例支持键盘快捷键。我尝试使用（也尝试过）覆盖默认行为，只要我只复制文本或列表项，就可以正常工作。但我还没有设法支持上下文感知复制粘贴。我希望copy命令在列表项处于焦点时（或在列表区域内使用鼠标光标）复制列表项，在列表未处于焦点时复制文本

更糟糕的是：我的页面中没有项目列表，所以我只希望有默认的复制粘贴文本行为

我尝试过以下方法：

在应用程序组件的componentDidMount中连接热键

在ListView组件的componentDidMount中连接热键

当我按下ctrl+c键时，两个组件都会触发事件，即使我返回false（这会阻止事件冒泡），它也会在这两个组件中触发。 我做错了什么

// ListView.js
componentDidMount() {
  hotkeys('cmd+c,cmd+v', 'TestView', this.onHotKey)
}
onHotKey = (event, handler) => {
  switch (handler.key) {
    case 'cmd+c':
      console.log('Testview: COPY!')
      break
    case 'cmd+v':
      console.log('Testview: PASTE!')
      break
  }
  event.preventDefault()
  return false
}

// App.js
componentDidMount = () => {
  hotkeys('cmd+c,cmd+v', this.onHotKey);
}
onHotKey = (event, handler) => {
  switch (handler.key) {
    case 'cmd+c': console.log('App: COPY!')
      break;
    case 'cmd+v': console.log('App: PASTE!')
      break;
  }
}

---

让我们把你的问题分成几个部分

您希望复制在所有常规情况下都能正常工作

您希望覆盖默认行为，并且如果列表处于焦点状态，则复制列表项

您希望覆盖默认行为，如果列表项已聚焦，则复制聚焦项

您描述的文本输入行为是通用的，除非您想以某种方式修改它，否则我将其忽略

假设您的元素已经可聚焦（具有

tabIndex

属性），那么对于每个项目和整个列表，都有“聚焦”和“未聚焦”。要检测从一种状态到另一种状态的变化，可以使用处理“模糊”和“聚焦”事件的事件侦听器。有一个捕获，来自项的事件将冒泡到列表中，所以，在我的示例中，我只使用列表中的侦听器。您可能需要更细粒度的事件侦听器附件（您甚至可以将其转换为HOC）

您必须处理的另一件事是如何存储复制和粘贴的信息。若你们像我在示例中所做的那个样将其存储在状态中，那个么用户将失去复制某些内容并将其粘贴到你们的应用程序之外的能力。另外，在我的示例中，我将复制和粘贴结合在一起，因此只有在聚焦其中一个元素时才能进行粘贴。您可能希望“粘贴”可以普遍使用。您可以为此使用或不推荐使用

最后，由于我使用Windows，

cmd

不起作用，所以我将其改为

ctrl

现在，举个例子：

从“react”导入{Component}；
导入“/styles.css”；
从“热键js”导入热键；
类列表扩展组件{
//这不是存储复制值的好地方。仅示例！
状态={
复制文本：“
};
//这是您的代码，已修改为在文本中存储元素
onHotKey=（事件、处理程序）=>{
开关（handler.key）{
案例“ctrl+c”：{
log（“复制”，document.activeElement.innerText）；
this.setState（{copiedText:document.activeElement.innerText}）；
打破
}
案例“ctrl+v”：{
log（“粘贴：”，this.state.copiedText）；
打破
}
违约：
打破
}
};
onFocus=（事件）=>{
//我们停止冒泡，以防止树中较高的内容设置自己的处理程序
event.stopPropagation（）；
//附加热键
热键（“ctrl+c，ctrl+v”，this.on热键）；
};
/**
*@param{React.FocusEvent}事件
*/
onBlur=（事件）=>{
//我们再次阻止事件冒泡
event.stopPropagation（）；
//和删除热键
热键。解除绑定（“ctrl+c，ctrl+v”）；
};
组件将卸载（）{
//这是预防措施。如果没有它，快速刷新可能会破坏我们的页面
热键。解除绑定（“ctrl+c，ctrl+v”）；
}
render（）{
返回(

{this.props.children}

);
}
}
//ListItem只是附加了tabIndex
类ListItem扩展组件{
render（）{
return
{this.props.children}
；
}
}
导出默认函数App（）{
返回(
第一要素
第二要素
);
}

您可以在此处看到实时版本：

这个例子只供你开始。它不会解决您所有的问题，但它应该为您提供如何进一步进行的基本概述。你的任务相当复杂，因此会有额外的挑战，你必须自己解决