如何使用reactjs为API数据创建搜索栏？

Question

我是新来的反应者，我创建了一个User component和search bar，但无法从组件中搜索数据。我的意思是我无法弄清楚searchBar组件如何工作。在搜索栏中输入内容时，如何过滤项目。

这里是用户的组件：

import React from "react";
import {
  Container,
  Checkbox,
  Grid,
  Header,
  Button,
  Popup,
  Avatar,
  Icon,
  Divider
} from "semantic-ui-react";
import Search from "./Search";
export default class DataView extends React.Component {
  constructor() {
    super();
    this.state = {
      Users: []
    };
  }
  componentDidMount() {
    this.fetchData();
  }
  componentDidUpdate() {
    this.fetchData();
  }
  fetchData() {
    fetch("api/Users")
      .then(response => response.json())
      .then(data => {
        this.setState({
          Users: data.item1
        });
      });
  }

  searchUsers = text => {
    console.log(text);
    fetch("api/Users")
      .then(response => response.json())
      .then(data => {
        this.setState({
          Users: data.item1
        });
      });
  };

  render() {
    const { Users } = this.state;
    return (
      <div>
        <Search searchUsers={this.searchUsers} />
        <Container>
          {Users.map(View => {
            return (
              <Grid key={View.id}>
                <Grid.Row>
                  <Checkbox />
                  <Header>
                    {View.firstName} {View.lastName}
                  </Header>
                </Grid.Row>
                <Divider />
                <Grid.Row>
                  <Avatar
                    name={View.firstName + " " + View.lastName}
                    maxInitials={2}
                    round={true}
                  />

                  <Grid.Column>
                    <Icon name="calendar outline" />
                    {View.experience}
                    <br />
                    <Icon name="money bill alternate outline" />
                    {View.salary}
                  </Grid.Column>
                </Grid.Row>
                <Divider />
                <Grid.Row>
                  <Grid.Column>
                    <Popup
                      content={View.email}
                      trigger={<Button icon="mail outline" />}
                    />

                  </Grid.Column>
                </Grid.Row>
              </Grid>
            );
          })}
        </Container>
      </div>
    );
  }
}

搜索组件：

import React, { Component } from "react";
import { Form, Input, Button } from "semantic-ui-react";
export default class Search extends Component {
  state = {
    text: ""
  };

  handleChange = e => {
    this.setState({
      text: e.target.value
    });
  };

  handleSubmit = e => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({ text: "" });
  };
  render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <Input
            type="text"
            name="text"
            placeholder="Search Here"
            value={this.state.text}
            onChange={this.handleChange}
          />
          <Button type="submit" value="Search">
            Search
          </Button>
        </Form>
      </div>
    );
  }
}

JSON数据（API）类似于：

{
  "item1": [
    {
      "id": "2c963f",
      "firstName": "ABC",
      "lastName": "FED",
      "experience": 0,
        "salary": "20000",
         "email": "[email protected]",
},

{
      "id": "2c963g",
      "firstName": "DEC",
      "lastName": "POI",
      "experience": 0,
        "salary": "15000",
         "email": "[email protected]",
}

]

}

有人可以帮助我固定用户组件的搜索栏吗？

Answer 1

我建议您使用material-ui。它具有完美完成的自动完成功能。

这里是链接：https://material-ui.com/components/autocomplete/

这里是一个可以试用的演示：https://codesandbox.io/s/56m1p

如果由于某种原因而无法使用material-ui，则此链接指向教程的指南，可以指导您实现所需的目标：https://programmingwithmosh.com/react/simple-react-autocomplete-component/

我希望这对您有所帮助，并为您带来方便