我有一个搜索框和一个在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>
)
}
}