Как создать алфавит и поиск ввода в React JS

Question

Я хочу отфильтровать список по алфавиту и поиску.При нажатии на каждый алфавит он должен отсортировать список по алфавиту.

Прикрепленное изображение объясняет лучше

Например: если вы нажмете "A" , то отобразится начальный списокс «A» Like (Apple, Air plane, Adidas) и т. д. И случай должен быть таким же, когда вы вводите в поле ввода поиска.

Ниже приведена функция рендеринга в моем компоненте, которая извлекает список с помощью JSON API

component.js

{this.props.items.list.map((item) => (
                                <li key={item.id} className="celeb-item">
                                    <div className="celeb-item-info">
                                    <a href="#"><img src={item.image_url} className="img-responsive" /></a>
                                    <strong>{item.name}</strong>
                                    </div>

                                </li>
                            ))}

Answer 1

импорт React, {Component} из'act ';

    class App extends Component {
      state = { searchInput: '', alphabet: ''};
      onSearchInputChange = (e) => {
        this.setState({searchInput: e.target.value})
      }
      onAlphabetClick = (e) => {
        this.setState({alphabet: e.target.value})
      }
      prepareAlphabets = () => {
        let result = [];
        for(let i=65; i<91; i++) {
          result.push(
            <button type="button" key={i} onClick={this.onAlphabetClick} value={String.fromCharCode(i)} >{String.fromCharCode(i)}</button>
          )
        }
        return result;
      }
      elementContainsSearchString = (searchInput, element) => (searchInput ? element.name.toLowerCase().includes(searchInput.toLowerCase()) : false);
      filterItems = (itemList) => {
        let result = [];
        const { searchInput,alphabet } = this.state;
        if(itemList && (searchInput || alphabet)) {
          result = itemList.filter((element) => (element.name.charAt(0).toLowerCase() === alphabet.toLowerCase()) || 
          this.elementContainsSearchString(searchInput, element));
        } else {
          result = itemList || [];
        }
        result = result.map((item)=> (<li>{item.name}</li>))
        return result;
      }
        render() {
            const itemList = [{id: 1, name:'abcd'},{id: 2, name:'gfhj'}, {id: 3, name:'fh'}, {id: 4, name:'zxbv'}, {id: 5, name:'ewyur'}, {id: 6, name:'gsdjhbndf'}, {id: 7, name:'gbhfvd'}, {id: 8, name:'wgtaqe'}, {id: 1, name:'ab'}, {id: 1, name:'bcd'}, {id: 1, name:'cde'}];
            // const itemList = undefined;
          const filteredList = this.filterItems(itemList);
        return (
          <div>
            <input type="search" onChange={this.onSearchInputChange} />
            {this.prepareAlphabets()}
            <ul>
              {filteredList}
            </ul>
          </div>
        );
        }
    }

    export default App;

Answer 2

Самый простой способ добиться того, что вы описываете, - это связать Array.filter непосредственно перед Array.map .

. Вы можете использовать onChange & onClick соответственно обрабатывает поле поиска и алфавитные кнопки для изменения параметра, хранящегося в ваших компонентах state.Этот параметр затем может быть передан в ваш фильтр, примерно так:

{this.props.items.list
  .filter(item => item.name.startsWith(this.state.searchValue)
  .map(item => (
    <li key={item.id} className="celeb-item">
      <div className="celeb-item-info">
        <a href="#">
          <img src={item.image_url} className="img-responsive" />
        </a>
        <strong>{item.name}</strong>
      </div>
    </li>
  ))
}