在'react-bootstrap-typeahead'中搜索'AsyncTypeahead'

时间:2019-08-13 19:04:32

标签: javascript reactjs typeahead.js bootstrap-typeahead

例如,尝试在https://jsonplaceholder.typicode.com/todos/$ {id}中进行搜索。我收到消息:No matches found。 在React Bootstrap Typeahead页面上,有一个github的示例。可以在其他示例中使用吗? 谁能指出我做错了吗? 我使用以下库:https://ericgio.github.io/react-bootstrap-typeahead/#asynchronous-searching

示例:https://stackblitz.com/edit/react-d19cdp

项目

class Items extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: [],

      isLoading: false,
      multiple: false,
      options: [],
    }
  }

  _handleSearch = (id) => {
    this.setState({isLoading: true});
    axios.get(`https://jsonplaceholder.typicode.com/todos/${id}`)
      .then(({options}) => {
        this.setState({
          isLoading: false,
          options,
        });
      });
  }

  render () {
    return (     
        <div>  
          <Description
            _handleSearch = {this._handleSearch} 
            state = {this.state}
          /> 
        </div>
    )
  }  
}

说明

class Description extends Component {
  render() {

    return (
        <div>  
            <AsyncTypeahead
              {...this.state}
              id
              labelKey="title"
              minLength={1}
              onSearch={this.props._handleSearch}
              placeholder="Search todo by id."
              renderMenuItemChildren={(option, props) => (
                <GithubMenuItem key={option.id} user={option} />
              )}
            />

        </div>
    );
  }
}

0 个答案:

没有答案