基于 ReactJS 中数据的搜索字段

Question

我是 React 的新手。我正在创建一个小应用程序 users 和我需要创建一个搜索栏，如果我输入两个或三个用户名字母。但显然我卡住了。所以任何帮助都会很好。提前致谢

import React, { Component } from 'react'
 class FilterForm extends Component {   

 state = {
    query: '',
    user: [],
    searchString:[]   
   }

  handleInputChange = (e) => {
    this.setState ({
      query:e.target.value
    } ,()=>{
        this.filterArray();
      })   
    }   

  getData = () => {
    fetch(`http.//localhost:3000/login`)
    .then(response => response.json())
    .then(responseData => {
      //console.log(responseData)
      this.setState ({
        user:responseData,
        searchString: responseData
      })
    })   
   }

   filterArray = () => {
    let searchString = this.state.query;
    let responseData = this.state.user;

  if(searchString.length > 0){
  //console.log(responseData[i].first_name)
   searchString = responseData.filter(searchString);   

 this.setState({ responseData })
  }   
 }   

componentWillMount() {
  this.getData();   
}

   render() {
      return(
        <div className="searchform">
         <form>
          <input 
            type="text"
           id="filter"
            placeholder="Search for user..."
           onChange={this.handleInputChange}/>
          </form>
          <div>{this.state.searchString.map(i => <p>{i.first_name}</p>)} 
           </div>
      </div>
      )   
    } 
   }

export default FilterForm

这是我的 App.js

import React  from 'react';
import PeopleList from "./components/PeopleList"
import FilterForm from "./components/FilterForm"
//import { search } from "./Utils"
//import UserData from "./components/UserData";
//import SearchBox from "./components/SearchBox"
import './App.css';

class App extends React.Component {

  render() {
    return (
      <React.Fragment>
        <div>
          <FilterForm />
          <PeopleList />
        </div>

      </React.Fragment>
    );
  }
}
export default App

当我开始在搜索栏中输入内容时出现错误：

Answer 1

我编辑了你的 post 并做了一些缩进，对于你的问题，你的问题在 fillterArray 中，这不是你使用过滤器方法的方式，你正在为用户设置状态是与搜索不相关。

试试这个：

filterArray = () => {
  const { query, user } = this.state;

  if(query.length > 0){
   const searchResult = searchString.filter((el, i) => el[i].first_name.includes(query);

   this.setState({ searchString: searchResult })
  }   
 }

关于过滤方法的更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

基于 ReactJS 中数据的搜索字段

Searchfield based on the data in ReactJS

javascript

search-form

reactjs