文本选择后添加 React 组件答案

【问题标题】：Adding React components after text selection文本选择后添加 React 组件
【发布时间】：2015-12-29 01:36:45
【问题描述】：

我有一组表示文本文档的 React 组件。当有人选择文本时，我想显示一个工具栏。工具栏上的按钮最终会改变 React 组件的选定文本的样式。

文档中的每个短语都有自己的组件，看起来像（简化）：

render: function() {
    return (
        <span handleSelection={this.handleSelection}>
            <span className="pre"></span>
            <span className="phrase">text</span>
            <span className="post"></span>
            {this.renderSelectionToolbar}
        </span>
    )
},
renderSelectionToolbar: function() 
    return this.state.selected ? <ToolbarHTML> : '';
},
handleSelection: function() {
    this.setState({selected: true});
}

我尝试使用 var selection = window.getSelection() 获取选择。我可以使用 selection.anchorNode 获得包装跨度（选择的开始）。我尝试调用 selection.anchorNode.handleSelection()，但该函数在 html 元素上不存在。

如何在文本选择时调用我的 React 组件的方法？有没有更好的方法在选定文本后显示工具栏？谢谢！

【问题讨论】：

为什么不使用 DOM 鼠标向上事件，看看有没有被选中的东西？所以你可以在你的 react 组件中控制一切。
这是个好主意。我一直在使用父元素的 onMouseUp 事件，以便我可以跟踪文档中的更改，但这给了我解决问题的好主意。

标签： javascript reactjs

【解决方案1】：

感谢 Felipe T. 的评论，我有了一个解决问题的想法。

我已经在使用父元素的 onMouseUp 事件来提取已更改的短语列表。我一直在为每个短语渲染一个 phraseId 属性，以便我可以更新它在 mongodb 中的条目。现在，我正在使用属性 {contextToolbar: true} 更新选择中第一个短语的 mongodb 条目。然后，在我的渲染代码中，我使用相同的属性构建了一个显示。如果用户关闭工具栏或取消选择文本，则该属性将设置回 false。不过，如果用户直接选择一组新文本，我必须记住删除该标志。

这目前有效，但如果您有更优雅的解决方案，我很想听听。尤其是它不会强迫我在文档数据库中保存临时状态信息。

【讨论】：