javascript - 如何在表格中集成搜索功能？

Question

此时，页面上已成功加载从 API 接收到的所有可用航类。但是，我想让最终用户能够搜索特定航类，比方说，按航类号 和出发日期。如何将此搜索功能集成到现有代码中？

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} />
    </>
  )
}

然后我会使用我的状态来过滤我的对象

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>
)};