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

然后我将使用状态来过滤

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 filter来flights.filter数组，也可以使用flights.sort来sort来数组。

Answer 4

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

DataTable doc

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

4 个答案: