#reactjs #antd #react-table-v6
#reactjs #antd #react-table-v6
Вопрос:
Я пытаюсь настроить фильтр поиска в таблице дизайна React Ant, обычно ant design позволяет настраивать выпадающий список для фильтра поиска, например. Но требование состоит в том, чтобы показывать постоянные поля поиска под столбцами, аналогично таблице react от Tanner, а не выпадающий список.
Я попытался передать ReactNode в title prop для столбцов, но это создает странные побочные эффекты onClick. Есть ли способ настроить заголовок?
Комментарии:
1. Вы можете добавить отдельную строку для поисковых таблиц, которые будут присутствовать по умолчанию в массиве данных таблицы. И добавьте onChange, события onSubmit для них.
2. Спасибо, как мы можем передать входной компонент в строковых данных? Я сделал что-то вроде этого: const transformData = (столбцы, данные = []) => {const col = {}; столбцы. forEach((element) => { if(element.searchable) col[element.title] = <Input />; }); возвращает [col, …data]; };
3. Проверьте мой ответ ниже
Ответ №1:
Упрощая, вы можете создать первую строку как:
getFieldsForEachColumn = (columns) => {
const row = {};
columns.forEach((element, index) => {
if (element.searchable) {
const inputFieldCell = (
<Input onChange={(e) => this.handleOnChange(e.target.value, element.title)}/>
);
row[Object.keys(data[0])[index 1]] = inputFieldCell
} else {
row[Object.keys(data[0])[index 1]] = null;
}
});
return row;
};
А затем, когда вы сопоставляете данные массива, просто нажмите это, возвращаемое в начале этого массива.
Комментарии:
1. Я пробовал это, но ничего не отображается под заголовком… [ codesandbox.io/s/festive-morse-k2byg?file=/index.js ]
2. Я внес некоторые изменения в ваш код. Пожалуйста, посмотрите.
3. Не могли бы вы опубликовать изменения здесь, я не вижу изменений в code sandbox
4. Я обновил свой ответ выше, функция будет выглядеть следующим образом. Вы можете изменить стиль поля ввода. Также переменная данных, используемая в приведенном выше методе, является фактическими данными.