如何在reactjs中选择要复制的文本而不触发单击事件
提问于 2019-06-27 21:35:03
我用的是反应台。我为列定义了onRowClick()函数。在这里，选择文本应该高亮显示文本，并单击“必须”重定向到另一个页面。现在，当我尝试选择文本时，它会被重定向。如何选择文本而不触发单击事件？
以下是我的onRowClick函数：
onRowClick = (state, rowInfo, columnInfo) => {
return {
onClick: (e, handleOriginal) => {
if (columnInfo.id) {
this.props.history.push(`/downloads/${rowInfo.original.id}`);
} else if (handleOriginal) {
handleOriginal();
}
}
};
}以下是我的“反应表”组件：
<ReactTable
manual
getTdProps = {this.onRowClick}
data = {results}
onFetchData = {this.onFetchData}
sortable = {false}
showPagination = {false}
noDataText = 'no data found'
columns = {[
{
Header: 'Id',
maxWidth: 50,
accessor: "id",
Cell: (props) => <span className="btn-link pointer">{props.value} </span>
},
{
Header: 'Processed on',
maxWidth: 165,
accessor: "created_at",
Cell: (props) => <span> {this.getDateTime(props.value)} </span>
}
]
/>单击id列应重定向到details页面。选择文本应该选择id文本。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-27 22:52:24
我认为onclick是无法阻止的，但是使用Window.getSelection()方法可以获得您想要的结果。
Window.getSelection()方法返回一个选择对象，表示用户选择的文本范围或插入符号的当前位置。
通过使用此方法，您可以获得选定的文本，然后可以将其长度计算为：
window.getSelection().toString()然后您可以修改您的onRowClick方法，如下所示：
onRowClick = (state, rowInfo, columnInfo) => {
return {
onClick: (e, handleOriginal) => {
let selection = window.getSelection().toString();
if(selection.length <= 0) {
if (columnInfo.id && selection.length > 0) {
console.log("columnInfo.id", columnInfo.id);
this.props.history.push(`/downloads/${rowInfo.original.id}`);
} else if (handleOriginal) {
handleOriginal();
console.log("columnInfo.id", "nothing");
}
}
}
};
};我创建了一个工作演示。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56801421
复制相关文章
点击加载更多
腾讯云开发者
