如何在表格上集成搜索功能？

Question

目前，从 API 收到的所有可用航班都已成功加载到页面上。 但是，我想让最终用户能够搜索特定航班，比如说，按flight number和departure date 。 如何将此搜索功能集成到现有代码中？

FlightPage.js

 render() {
    return (
      <>
        <h2>Flights</h2>
        {this.props.loading ? (
          <div>Loading...</div>
        ) : (
          <FlightList flights={this.props.flights} />
        )}
      </>
    );
  }
}

正如您可以看到下面的代码，我使用表格来呈现结果。我想在应用搜索时只显示一个结果或空白表格。 你能帮我实现这个目标吗？

FlightList.js

const FlightList = ({ flights }) => (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Date</th>
        <th>Provider</th>
        <th>Dest</th>
      </tr>
    </thead>
    <tbody>
      {flights.map((f, i) => {
        return (
          <tr key={i}>
            <td>
              <input type="checkbox" name="flightListCheckbox" />
            </td>
            <td>{f.date}</td>
            <td>{f.pnr}</td>
            <td>{f.flightNumber}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

Answer 1

您可以使用filter来创建搜索功能，就像我首先添加一个可以插入过滤器值的输入一样

FlightPage.js

handleInput: (event) => {
  const { name, value } = event.target

  this.setState({ [name]: value })
}

render () {
  const { filter } = this.state
  return (
    <>
      <input onChange=(this.handleInput) value={filter} name='filter' />
      <FlightList flights={this.props.flights} filterValues={filter} />
    </>
  )
}

然后我会用我的 state 过滤我的 Object

FlightList.js

const FlightList = ({ flights, filterValue }) => {

const filterdFlights = flights.filter(flight => Object.values(flight).includes(filterValue))

return (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Date</th>
        <th>Provider</th>
        <th>Dest</th>
      </tr>
    </thead>
    <tbody>
      {filterdFlights.map((f, i) => {
        return (
          <tr key={i}>
            <td>
              <input type="checkbox" name="flightListCheckbox" />
            </td>
            <td>{f.date}</td>
            <td>{f.pnr}</td>
            <td>{f.flightNumber}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
)};

Answer 2

您需要一个input来按输入值搜索和过滤flights 。 尝试这个

class FlightPage extends React.Component {
  state = {
    keyword: '',
  }

  ...

  getFlights = () => {
    const { keyword } = this.state
    const { flights } = this.props

    return flights.filter(flight => flight.name.includes(keyword)) // name or something else
  }

  onInputChange = e => {
    this.setState({ keyword: e.target.value })
  }

  render () {
    return (
      <>
        <input onChange=(this.onInputChange) value={this.state.keyword} />
        <FlightList flights={this.getFlights()} />
      </>
    )
  }

}

Answer 3

您可以使用flights.sort 过滤flights数组或使用flights.filter对其进行排序。

Answer 4

您可以尝试使用 jquery 数据表。 它为易于实现的表格增加了很多功能。

数据表文档