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

【问题标题】：Get id's of multiple <span> elements on selection? (React)在选择时获取多个 <span> 元素的 id？（反应）
【发布时间】：2017-09-07 08:17:21
【问题描述】：

在 React 中，我从一个数组中创建了<span>，它给了我单词。然后我有，例如：

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

我还为每个跨度分配唯一标识符（键），（以 id 的形式）我也从原始数组中获得。

问题：

我现在希望用户选择个单词，而不是单独点击它们，而是实际选择它们（这样单词的背景就会变成蓝色） .

每当用户执行此操作时，我都想取回所选跨度的 ID。我怎么能实现这样的东西？

我正在使用 React、Redux 和电子。

【问题讨论】：

检查这个答案，可能对你有帮助：stackoverflow.com/a/43255383/5185595
检查Selection + selectstart 文档;)
@MayankShukla 不，这没有多大帮助。首先，答案是纯 JavaScript。其次，我仍然不知道如何做代码的选择位，并从用户选择中提取 id。

标签： javascript html reactjs electron react-redux

【解决方案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);
  }
});

在 react 组件 (ES6) 中，它可能看起来像这样 SelectionDemo

编辑：
- 如果您有大量的单词，请考虑使用限制，因为每次更改都会触发 selectionchange (char by char)
- 你也可以使用无状态组件来缩短代码

【讨论】：