时间戳

首页 > 解决方案 > 我在过滤搜索时做错了什么

javascript - 我在过滤搜索时做错了什么

问题描述

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

在 event.jsx 文件中，我有 handleSearch 功能。

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" />

标签： javascriptreactjs

解决方案

您正在将输入元素的道具设置为可能未定义onChange的调用函数。onChange

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

第二个onChange不是函数。

推荐阅读