Question

目标：
一开始，列表很简单。
在文本框中编写内容时，应使用api进行调用，并且应使用输入数据过滤数据列表。
该过程完成后，将显示结果。

当您使文本框显示为空时，列表应为空。

问题：
我不知道怎么解决。
我缺少哪一部分？

信息：
我是reactjs的新手。

Stackblitz：
https://stackblitz.com/edit/react-search-filter-fhr4pm

import React, { Component } from 'react';
import { render } from 'react-dom';
// import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();

    this.state = {
      error: null,
      Loaded: false,
      albums: []
    };

    this.filterList = this.filterList.bind(this);
  }

  componentWillMount(){

  }

  filterList(e){

    fetch("https://jsonplaceholder.typicode.com/albums")
      .then(response => response.json())
      .then(albums => {

        this.setState({ Loaded: true, albums }) 

        albums = albums.filter(item => {
          return item.toLowerCase().search(
            e.target.value.toLowerCase()
            ) !== -1;
        });

        this.setState({ Loaded: true, albums }) 


      },
      error => { this.setState({ Loaded: true, error }); })
  }

  render() {
    const { albums } = this.state;

    return (
      <React.Fragment>
        <input type="text" onChange={this.filterList} />
        <ul>
          {albums.map(album => (<li key={album.id}>{album.title}</li>))}
        </ul>
      </React.Fragment>
    );
  }
}

render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

谢谢！

Answer 1

我很幸运能找到解决方案。

需要在seach方法内部获取

https://stackblitz.com/edit/react-filter-search-demo-xu2nt6

如何过滤列表然后显示

1 个答案: