reactjs – 材料UI自动完成不在React应用程序中的远程dataSource

发布时间：2020-12-15 20:15:39 所属栏目：百科来源：网络整理

导读：我使用的是React 15.0.1和Material-UI 0.15.0.我试图通过React渲染自动完成.这是我的代码： import React from 'react';import SomeService from '../../../services/SomeService';import AutoComplete from 'material-ui/AutoComplete';class SearchInput e

我使用的是React 15.0.1和Material-UI 0.15.0.我试图通过React渲染自动完成.这是我的代码：

import React from 'react';

import SomeService from '../../../services/SomeService';

import AutoComplete from 'material-ui/AutoComplete';

class SearchInput extends React.Component {
  constructor (props) {
    super(props);
    
    this.state = {
      dataSource: []
    };
  }
  
  searchSomething (value) {
    if (value.length) {
      SomeService.fetchAutocomplete({searchQuery: value})
        .then((res) => this.handleSuccess(res.data),(err) => this.handleFailure(err));
    } else {
      this.setState({
        dataSource: []
      });
    }
  };
  handleSuccess (response) {
    this.setState({dataSource: response.slice(0,10)});
  }
  handleFailure (err) {
    console.log(err);
  }
  
  render () {
    return (
      <div>
        <AutoComplete
          floatingLabelText='Enter test'
          dataSource={this.state.dataSource}
          onUpdateInput={(val) => this.searchSomething(val)}
          fullWidth={true} />
      </div>
    );
  }
}

export default SearchInput;

假设我得到一个包含数据的响应对象：[…] //一堆东西.
这没有呈现.

响应对象类似于：

reponse: {
  ....,data: ['Apple','Banana','Orange'],....
}

谁能帮我吗？

解决方法

根据 this问题和提到的评论,你只需要通过传递true来跳过过滤器功能.

<AutoComplete
          floatingLabelText='Enter test'
          dataSource={this.state.dataSource}
          onUpdateInput={(val) => this.searchSomething(val)}
          fullWidth={true} 
          filter={(searchText,key) => true} />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!