如何在React JS中创建字母和输入搜索

Question

我想按字母过滤列表并搜索输入。单击每个字母后，应根据字母对列表进行排序。

随附的图片可以更好地说明

例如：如果单击“ A” ，则它将显示以“ A” 开头的列表，例如（Apple，Airplane和Adidas）等。在搜索输入框中输入时，大小写应该相同。

下面是我组件中的render函数，该函数通过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

实现描述的最直接的方法是在 Array.map 之前将 Array.filter 链接起来。

您可以分别在搜索字段和字母按钮上使用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>
  ))
}

Answer 2

从'react'导入React，{组件};

lapply