如何在reactjs中选择要复制的文本而不触发点击事件

Question

我正在使用反应表。我已经为一列定义了 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 列应重定向到详细信息页面。选择文本应该选择 id 文本。

Answer 1

我认为onclick无法阻止，但可以通过使用Window.getSelection()方法获得您想要的结果。

Window.getSelection() 方法返回一个 Selection 对象，该对象表示用户选择的文本范围或插入符号的当前位置。

通过使用此方法，您可以获得选定的文本，然后您可以将其长度计算为：

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

我已经创建了一个工作演示。