我在过滤搜索方面做错了什么

Question

我是开发新手，最近学会了反应。我正在制作一个事件托管应用程序并实现搜索栏，但是当我在搜索栏中输入某些内容时遇到错误。

在event.jsx文件中，我有句柄搜索功能。

handleSearch = query => {
this.setState({ searchQuery: query });
};
getPagedData = () => {
const {
searchQuery,
events: allEvents
} = this.state;
let filtered = allEvents;
if (searchQuery)
filtered = allEvents.filter(e =>
e.title.toLowerCase().startsWith(searchQuery.toLowerCase())
);
return { totalCount: filtered.length };
};

这是我的搜索栏组件，它说onChange不是一个函数。

import React from "react";
const SearchBox = ({ value, onChange }) => {
return (
<div className="search-box">
<input
className="search-txt"
type="text"
name="query"
placeholder="search"
value={value}
onChange={e => onChange(e.currentTarget.value)}
/>
<a className="search-btn" href="">
<i className="fa fa-search" />
</a>
</div>
);
};
export default SearchBox;

这就是我所在州所拥有的——

class Events extends Component {
state = {
events: getEvents(),
showDetails: false,
shownEventID: 0,
searchQuery: ""
};

TypeError: onChange is not a function
onChange
src/components/SearchBox.jsx:12`enter code here`
9 |   name="query"
10 |   placeholder="search"
11 |   value={value}
> 12 |   onChange={e => onChange(e.currentTarget.value)}
| ^  13 | />
14 | <a className="search-btn" href="">
15 |   <i className="fa fa-search" />

Answer 1

使用所需的 props 渲染SearchBox组件，使用您通过onChange更改的状态值 (this.state.searchQuery(，而不仅仅是this.searchQuery(您在评论中说您尝试过(：

<SearchBox value={this.state.searchQuery} onChange={this.handleSearch}/>

这将响应式更新，因为SearchBox现在每次父状态发生searchQuery更改时都会重新呈现。

Answer 2

您正在将输入元素的onChange属性设置为一个名为onChange的函数，该函数可能未定义。

onChange={e => onChange(e.currentTarget.value)}

第二个onChange不是函数。