React-bootstrap-table -为文本过滤器输入设置maxLength

Question

我正在使用react-bootstrap-table库(第一个版本)，并希望为我的表组件中的所有过滤器输入设置最大长度。有这样的选项吗?或者我需要一些查询选择器来为我做这件事？我在文档里找不到这样的东西。

Answer 1

如你所想，One way how to do (不是"react way")是使用查询选择器的，例如：

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

< filter-row-classname >-在react-table中。-filter

我会推荐second way

您可以定义自己的列：

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"
            />

这是编辑过的代码--检查“姓氏”：working example with maxlength attribute

问候