React-bootstrap-table - установить maxLength для ввода текстового фильтра

Question

Я использую библиотеку response-bootstrap-table (первая версия) и хотел бы установить максимальную длину для всех входов фильтра в компоненте моей таблицы. Есть ли такая опция, или мне нужен какой-то селектор запросов, чтобы сделать это для меня? Я не могу найти ничего подобного в документации.

Answer 1

Один из способов как это сделать (не тот, который "реагирует"), как вы предполагали, с помощью селектора запросов, например:

document.querySelectorAll('<filter-row-classname> input')
    .forEach(filter => filter.setAttribute('maxlength',5))

<имя-строки-фильтра> - в таблице реакций это .- фильтры

Я бы предложил Второй способ :

Вы можете определить свои собственные столбцы:

const columns = [{
    Cell: JSX | string | function,
    Header: JSX | string | function,
    Filter: JSX | function
    Footer: JSX | string function,
    <much more - see documentation>
}]

Так что на самом деле вы можете сделать следующее в столбцах:

Filter: onChange => (
            <input 
                onChange={e => onChange(e.target.value)}
                maxLength="your_value"
            />

здесь отредактированный код - отметьте «фамилия»: рабочий пример с атрибутом maxlength

Привет