根据正则表达式过滤数组

时间:2020-01-28 10:51:26

标签: javascript regex reactjs

我有一个搜索框和一个在filledArray中生成的项目数组,我试图根据在搜索框中键入的内容来过滤此数组。

我正在尝试使用正则表达式来使它与单词的开头匹配,例如includes(),它将匹配任何字符,并且不会给我想要的结果。

如何实现一个正则表达式,该表达式将searchTerm与项目数组中每个项目的开头匹配并进行相应过滤

class Task3 extends React.Component {
  state = {
    searchValue: '',
  }

  handleOnChange = (event) => {
    this.setState({ searchValue: event.target.value })
  }

  render() {
    const { addItem, itemsToShow, removeItem, selectedItems } = this.props
    const { searchValue } = this.state
    const filledArray = [...Array(301)].map((_, i) => `element ${i}`)
    return (
            <ElementsListWrap>
              {/* filter((item) => this.state.searchValue.includes(item)) */}
              {filledArray.slice(0, itemsToShow !== 'all' ? itemsToShow : filledArray.length)
              .filter((item) => new RegExp(`/^${searchValue}/`.test(item)))
              .map((index) => (
                <div
                  key={index} 
                  onClick={ () => { this.handleAddElement(index) } }>
                  <ElementWrap
                    active={selectedItems.includes(index)}>
                  {index}
                  </ElementWrap>
                </div>
                ),
              )}
            </ElementsListWrap>
    )
  }
}

0 个答案:

没有答案
相关问题