reactjs 如何过滤一个React下拉菜单，并有页面更新，以显示只有在下拉菜单中点击的项目表？

roejwanj 于 2023-03-12 发布在 React

关注(0)|答案(2)|浏览(143)

非常直接。我有一个表（一个列表）显示在我的网页上的React，并希望用户过滤表，以显示什么是点击下拉菜单。
我尝试了很多方法，花了很多时间在网上看视频。这是我的代码。我正在为过滤器创建一个状态，Map正确的项目“saleperson”数组，我有.includes（filterTerm）在那里了。我看不出我做错了什么。我在我的控制台得到模糊的错误，所以这不是很有帮助。我是新的React，所以我肯定我'我正在做一些语法错误排序，但需要一些帮助，请。谢谢

import React, {useState, useEffect } from 'react';

function ListSalesHistory() {

  const [sales, setSales] = useState([])
  const [salespersons, setSalesPersons] = useState([])

  const [filterTerm, setFilterTerm] = useState("")

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  }

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  }

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord)
    }

  }

  useEffect(()=>{
    getData()
  }, [])

  useEffect(()=>{
    fetchData()
  }, [])

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSalesPersons(value);
}

  return (
    <div>
      <h1>Sales person history</h1>
      <select value={salespersons} onChange={handleSalesPersonChange} required id ="salesperson" name="salesperson" className="form-select form-select-lg form-select-padding-lg mb-3" >
        <option value="" onChange={handleFilterChange}>Choose a sales person</option>
        {salespersons
        .filter((saleperson) => saleperson.name.includes(filterTerm))
        .map(saleperson => {
          return(
            <option key={ saleperson.name } value={ saleperson.name }>
              { saleperson.name }
            </option>
          )
        })}
      </select>
      <table className="table table-striped">
      <thead>
        <tr>
          <th>Sales person</th>
          <th>Customer</th>
          <th>VIN</th>
          <th>Sale price ($)</th>
        </tr>
      </thead>
      <tbody>
        {sales.map(sale => {
          return(
            <tr key={ sale.id }>
              <td>{ sale.sales_person.name }</td>
              <td>{ sale.customer.name }</td>
              <td>{ sale.automobile.vin }</td>
              <td>{ sale.sales_price }</td>
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>

  )
}

export default ListSalesHistory;

reactjs

来源：https://stackoverflow.com/questions/75701264/how-to-filter-over-a-react-dropdown-and-have-the-page-update-to-show-the-table-o

2条答案

按热度按时间

pqwbnv8z1#

编辑试试这个更新的代码这一次它应该工作：

import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [salespersons, setSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    getData();
    fetchData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person.name === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {salespersons.map((saleperson) => (
          <option key={saleperson.name} value={saleperson.name}>
            {saleperson.name}
          </option>
        ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Sales person</th>
            <th>Customer</th>
            <th>VIN</th>
            <th>Sale price ($)</th>
          </tr>
        </thead>
        <tbody>
          {filteredSales.map((sale) => (
            <tr key={sale.id}>
              <td>{sale.sales_person.name}</td>
              <td>{sale.customer.name}</td>
              <td>{sale.automobile.vin}</td>
              <td>{sale.sales_price}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ListSalesHistory;

赞(0）回复(0）举报 2023-03-12

z9zf31ra2#

import React, { useState, useEffect } from 'react';

function ListSalesHistory() {
  const [sales, setSales] = useState([]);
  const [filteredSalespersons, setFilteredSalesPersons] = useState([]);
  const [selectedSalesPerson, setSelectedSalesPerson] = useState('');
  const [filterTerm, setFilterTerm] = useState('');

  const handleFilterChange = (e) => {
    setFilterTerm(e.target.value);
  };

  const fetchData = async () => {
    const url = 'http://localhost:8090/api/sales/salesperson/';
    const response = await fetch(url);

    if (response.ok) {
      const data = await response.json();
      setFilteredSalesPersons(data.salespersons);
    }
  };

  const getData = async () => {
    const response = await fetch('http://localhost:8090/api/sales/');

    if (response.ok) {
      const data = await response.json();
      setSales(data.salesrecord);
    }
  };

  useEffect(() => {
    fetchData();
    getData();
  }, []);

  const handleSalesPersonChange = (event) => {
    const value = event.target.value;
    setSelectedSalesPerson(value);
  };

  const filteredSales = sales.filter(
    (sale) =>
      sale.sales_person === selectedSalesPerson &&
      sale.sales_person.name.toLowerCase().includes(filterTerm.toLowerCase())
  );

  return (
    <div>
      <h1>Sales person history</h1>
      <select
        value={selectedSalesPerson}
        onChange={handleSalesPersonChange}
        required
        id="salesperson"
        name="salesperson"
        className="form-select form-select-lg form-select-padding-lg mb-3"
      >
        <option value="">Choose a sales person</option>
        {filteredSalespersons
          .filter((saleperson) =>
            saleperson.name.toLowerCase().includes(filterTerm.toLowerCase())
          )
          .map((saleperson) => (
            <option key={saleperson.name} value={saleperson.name}>
              {saleperson.name}
            </option>
          ))}
      </select>
      <input type="text" placeholder="Search..." onChange={handleFilterChange} />
      {sales.length > 0 && (
        <table className="table table-striped">
          <thead>
            <tr>
              <th>Sales person</th>
              <th>Customer</th>
              <th>VIN</th>
              <th>Sale price ($)</th>
            </tr>
          </thead>
          <tbody>
            {filteredSales.map((sale) => (
              <tr key={sale.id}>
                <td>{sale.sales_person.name}</td>
                <td>{sale.customer.name}</td>
                <td>{sale.automobile.vin}</td>
                <td>{sale.sales_price}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}

export default ListSalesHistory;

一些小的变化，我希望它的工作

赞(0）回复(0）举报 2023-03-12

我来回答

reactjs 如何过滤一个React下拉菜单，并有页面更新，以显示只有在下拉菜单中点击的项目表？

2条答案

相关问题

热门标签

最新问答