Question

我有一个简单的textarea我希望用户能够选择/突出显示文本以使其变为粗体，斜体等，就像我现在正在写的那样。

我实际上使用onKeyDown方法然后使用window.getSelection()来使用它，但我觉得在React中使用window是错误的方法。正确？如果是这样，我该怎么用？

handleKeyDown(event) {
    const highlightedText = window.getSelection().toString()
    console.log(highlightedText)
},

render() {
    return (
        <textarea onKeyDown={this.handleKeyDown} />
    )
}

Answer 1

当事情出错时，就是在React之外修改DOM。但事实并非如此。

我不介意在我的反应代码中调用function drawTable(dataset,options){ 'use strict'; var data = new google.visualization.DataTable(dataset); var cssClassNames = { 'tableRow': '', 'hoverTableRow': '', 'headerCell': 'd', 'tableCell': ''}; options.cssClassNames = cssClassNames; var table = new google.visualization.Table(document.getElementById('tableChart')); table.draw(data, options); }。我一直在使用window.getSelection方法/ attrs，例如document和document.activeElement方法/ attr，例如window和window.innerHeight。我遇到了没有问题，我没有找到任何其他更好的方式来得到我想要的东西。

虽然测试中需要注意。您需要设置窗口对象并使其可用于测试代码。

Answer 2

在React中使用window.getSelection是可以的。在破坏组件模型和获得意外结果方面，我在这里看到的唯一问题是您在组件中调用方法，但选择实际上是在页面上的不同元素上。

在你的情况下，因为你在getSelection处理程序中调用onKeyDown，你知道选择必须来自这个组件实例，因为它需要专注于接收事件。

但是如果您希望能够以安全的方式随时在组件内部进行选择，您可以在组件上创建一个成员函数，以检查它是否使用refs进行了重点关注：

getSelection() {
    return (this.refs.container === document.activeElement) ?
        window.getSelection() : null;
}

render() {
    return (
        <textarea onKeyDown={this.handleKeyDown} ref="container" />
    )
}

如果getSelection()在此组件实例中，$('input[name="data[User][no_alerts]"]').attr({ 'disabled' : true, });将返回选择，否则返回null。

在React的textarea中使用什么而不是window.getLocation（）？

2 个答案: