在选择时获取多个<span>元素的id？ （反应）

Question

在React中，我用数组创建了<span>，它给了我一些文字。然后，我有，例如：

<span> bla </span> <span> bla </span> <span> bla </span>

我还为每个范围分配唯一标识符（键）（以ids的形式），我也从原始数组中获取。

问题：

我现在希望用户选择字词，而不是单独点击它们，但实际上选择它们（以便字词的背景变为蓝色） 。

每当用户这样做时，我想回到所选跨距的id。我怎么能实现这样的东西？

我正在使用React，Redux＆amp;电子。

Answer 1

因为我非常无聊：D

这是选择更改事件的监听者：
MDN Selection Interface
请记住：你必须检查选择是否是完整的单词等。
请检查文档和调试程序以查看Selection的行为;）

document.addEventListener('selectionchange', () => {
  const selection = window.getSelection();
  const selectedText = selection.toString();
  const selectedElement = selection.focusNode.parentNode;
  const wordIndex = this.words.indexOf(selectedText);

  if( wordIndex !== -1) {
    alert('you selected a word from the list with id:' + selectedElement.id);
  }
});

在反应组件（ES6）中，它可能看起来像SelectionDemo

编辑：
- 如果您有大量的单词，请考虑使用限制，因为选择更改将触发每次更改（char by char）
- 您还可以使用无状态组件来缩短代码