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

我创建了一个working demo。

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

1 个答案: