reactjs - React Ant 设计表 - 自定义搜索过滤器

Question

我正在尝试在 React Ant 设计表中自定义搜索过滤器，通常 ant 设计允许自定义下拉搜索过滤器，例如。但要求是在类似于Tanner 的 react 表的列下显示永久搜索框，而不是下拉列表。

我试图在列的标题道具中传递一个 ReactNode，但它会产生奇怪的 onClick 副作用。有没有办法自定义标题？

Answer 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;

};

然后，当您映射数组数据时，只需将返回的值推送到该数组的开头即可。