Как выделить текст для копирования, не вызывая событие клика в реакции

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 должен быть перенаправлен на страницу сведений.Выбор текста должен выбрать идентификатор текста.

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

Я создал рабочую демонстрацию .