ReactTable (ReactJS) — фильтрация поиска в строке с содержимым HTML не работает
Я использую РеактТаблица и показываю данные из массива (массив URL-адресов сайта) в виде HTML с реальными ссылками.
К сожалению, фильтрация поиска в этом столбце не работает, когда я использую HTML в ячейке. Это мой код для этого столбца:
{
Header: 'URL',
accessor: 'url',
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}
DisplayCellData — это моя функция, которая преобразует массив URL-адресов в строку HTML с форматированными тегами. строка.значение содержит массив URL-адресов, например ['http://google.com', 'http://yahoo.com/', ...].
Как я могу изменить этот код, чтобы фильтрация для этого столбца работала нормально? Я пробовал код, подобный этому, для преобразования массива в строку в методе доступа, чтобы сделать его доступным для поиска, но он не работает:
{
id: 'url',
Header: 'URL',
accessor: row => row.url.toString(),
Cell: row => <div>{this.displayCellData(row.value, 'url')}</div>
}
ДОБАВЛЕНА SANDBOX для теста:
https://codesandbox.io/s/flamboyant-mountain-ezxmy (попробуйте выполнить поиск в столбце)
Вкратце - просто обычная таблица (вы можете использовать любую типовую таблицу для теста с некоторыми данными в формате HTML в столбце), код инициализации:
<ReactTable data = {this.props.data} columns = {columns} фильтруемые />
Проверьте песочницу здесь и попробуйте выполнить поиск: codeandbox.io/s/яркая-гора-ezxmy.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
https://codesandbox.io/s/реверент-банах-9l31m
Вы можете перезаписать defaultFilterMethod, чтобы настроить поведение фильтра.
<div className = "App">
<ReactTable
data = {data}
columns = {columns}
filterable
defaultFilterMethod = {(filter, row) => { return row[filter.id].indexOf( filter.value ) > -1; }}
/>
</div>
Когда вы сейчас наберете http://google.com, он отфильтрует все, кроме первой строки, на основе точного совпадения. Если вам нужна другая логика фильтра, не стесняйтесь редактировать файл defaultFilterMethod. В настоящее время он работает с точными совпадениями. Просто не забудьте вернуть значение boolean.
Вы можете изменить defaultFilterMethod, как упоминал @arnonuem. Но я бы предложил реализовать его с помощью filterMethod на уровне столбца.
const columns = [
{
Header: "URL",
accessor: "url",
Cell: row => <div>{displayCellData(row.value)}</div>,
filterMethod: (filter, row) => {
return row.url.indexOf(filter.value) >=0;
}
}
];
Если вы хотите выполнить поиск, содержащийся в массиве, вы можете использовать что-то вроде ниже
const columns = [
{
Header: "URL",
accessor: "url",
Cell: row => <div>{displayCellData(row.value)}</div>,
filterMethod: (filter, row) => {
return row.url.findIndex(item => item.indexOf(filter.value) >= 0) >= 0;
}
}
];
Обновленная песочница ниже
https://codesandbox.io/s/interesting-rubin-thdwn
Спасибо большое. Ваше решение ясно, и ваш второй код работает нормально!
Еще один вопрос - как мне изменить return row.url.findIndex(item => item.indexOf(filter.value) >= 0) >= 0; код, поэтому он все равно будет работать, если row.url не является массивом, а только одной строкой (один URL-адрес вместо массива URL-адресов)?
Вы можете проверить, является ли row.url строкой или массивом. > Array.isArray("aa") false или Array.isArray(["aa"]) true
Добавьте пользовательский метод фильтра в соответствующий столбец, например:
filterMethod: (filter, row) => {
if (row.url.findIndex(element => element.includes(filter.value)) > -1) {
return true;
}
return false;
}
вы можете использовать метод find в своих реквизитах defaultFilterMethod с функцией includes:
import React from "react";
import ReactDOM from "react-dom";
import "react-table/react-table.css";
import ReactTable from "react-table";
import "./styles.css";
function App() {
const data = [
{
url: ["http://google.com", "http://yahoo.com/", "http://ggg.com"]
},
{
url: ["http://xgoogle.com", "http://zyahoo.com/", "http://xggg.com"]
}
];
const columns = [
{
Header: "URL",
accessor: "url",
Cell: row =>
row.row.url.map((url, key) => (
<div>
<a href = {url} key = {key} target = "_blank" rel = "noopener noreferrer">
{url}
</a>
</div>
))
}
];
return (
<div className = "App">
<ReactTable
data = {data}
columns = {columns}
filterable
defaultFilterMethod = {(filter, row) => {
return row[filter.id].find(el => el.includes(filter.value));
}
}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Можете показать код таблицы/логику фильтра?