Question

我有一组代表文本文档的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组件的方法？有没有更好的方法在选定的文本后显示工具栏？谢谢！

Answer 1

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

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

这是现在的工作，但如果你有一个，我会喜欢听到更优雅的解决方案。特别是不强迫我在文档数据库中保存临时状态信息的那个。

在文本选择后添加React组件

1 个答案: