Javascript 在文本选择后添加React组件

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

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

render:function（）{
返回(
文本
{this.renderSelectionToolbar}
)
},
renderSelectionToolbar:函数（）
返回this.state.selected？：“”；
},
handleSelection:function（）{
this.setState（{selected:true}）；
}

我尝试使用var selection=window.getSelection（）获取选择。我可以使用selection.anchorNode获得环绕范围（选择的开始）。我尝试调用selection.anchorNode.handleSelection（），但该函数在html元素上不存在

---

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

多亏了Felipe T.的评论，我有了一个解决问题的想法

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

---

这是目前的工作，但我想听到一个更优雅的解决方案，如果你有一个。尤其是一个不会强制我在文档数据库中保存临时状态信息的事件。

为什么不使用DOM鼠标向上事件，查看是否选择了某些内容？所以你可以从你的反应组件中控制一切，这是个好主意。我一直在使用父元素的onMouseUp事件，以便跟踪文档中的更改，但这给了我一个解决问题的好主意。

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});
}