Material UI 将过滤功能导入<AutoComplete filter= />答案

【问题标题】：Material UI importing filter function into <AutoComplete filter= />Material UI 将过滤功能导入<AutoComplete filter= />
【发布时间】：2016-11-28 16:35:54
【问题描述】：

不确定这是错误还是我缺乏反应知识。我没有收到任何错误，但过滤器不起作用。如果我将函数写入同一个文件，过滤器可以工作，我做错了吗？

Filters.js

const filterResults = (searchText, key) => {
 if (searchText.length === 0) {
   return false;
 }
  const compareString = key.toLowerCase();
  searchText = searchText.toLowerCase();

  const subMatchKey = key.substring(0, searchText.length);
 const distance = AutoComplete.levenshteinDistance(searchText.toLowerCase(), subMatchKey.toLowerCase());
  let searchTextIndex = 0;
  for (let index = 0; index < key.length; index++) {
    if (compareString[index] === searchText[searchTextIndex]) {
      searchTextIndex += 1;
    }
  }

  return searchText.length > 3 ? distance < 2 : distance === 0;
  return searchTextIndex === searchText.length;
 };

 export default filterResults;

Main.js

import filterResults from '../AutoComplete/Filters'

    <AutoComplete
        dataSource={location}
        onUpdateInput={this.onInputChange}
        searchText={this.state.city}
        filter={this.filterResults}

      />

【问题讨论】：

你不应该使用“this”。在 filter={this.filterResults} 上，因为它不是您的组件的成员。
仍然无法按预期工作。未捕获的 ReferenceError：未定义自动完成
您还需要添加“import AutoComplete from 'material-ui/AutoComplete';”到您的 Filters.js 文件，因为您在这里引用了一个静态方法：“const distance = AutoComplete.levenshteinDistance(...)...”
工作，谢谢！

标签： reactjs material-ui

【解决方案1】：

试试这个

<AutoComplete
    dataSource={location}
    filter={AutoComplete.caseInsensitiveFilter}
  />

Material-UI 有一些内置的过滤功能

【讨论】：