Как выбрать текст для копирования без запуска события клика в reactjs
Я использую реагирующую таблицу. Я определил функцию 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 должен перенаправить на страницу сведений. При выборе текста следует выбрать текст идентификатора.
Привет, Кристофер, я обновил свой вопрос.
@Beu Пожалуйста, добавьте код JSX
привет .. Я только что снова обновил свой вопрос, реагируя на комментарий
Привет, поскольку вы использовали здесь событие onClick, оно будет перенаправлено, поэтому вы ничего не сможете с этим сделать, но если вы измените событие onClick на onDoubleClick, тогда, если вы щелкнете два раза, оно будет перенаправлено, а не в одном нажмите. Надеюсь, это может быть полезно для вас.
Возможный дубликат Предотвратить событие onClick при выборе текста
Ответы 1
Я думаю, что onclick нельзя предотвратить, но желаемый результат можно получить, используя метод Окно.getSelection().
The Window.getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret.
Используя этот метод, вы можете получить выделенный текст, а затем вычислить его длину следующим образом:
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.info("columnInfo.id", columnInfo.id);
this.props.history.push(`/downloads/${rowInfo.original.id}`);
} else if (handleOriginal) {
handleOriginal();
console.info("columnInfo.id", "nothing");
}
}
}
};
};
Я создал файл рабочая демонстрация.
Можете ли вы опубликовать часть кода компонента?