Реагируйте на прослушивание нескольких полей ввода и фильтрацию списка на основе ввода

Question

У меня есть класс React, в котором я получаю список объектов и мне нужно поместить их в таблицу. Эта часть работает нормально. Теперь мне нужно реализовать фильтр для каждого заголовка, который, если пользователь вводит что-то в это поле ввода, а затем в зависимости от того, где это было (в заголовке 1, заголовке 2 и т. Д. c), он будет сортировать в соответствии с этим и тем, что было написано в поле.

Итак, допустим, что header1 будет userID, и я наберу 23 в поле ввода под header1, тогда он вернет только те элементы из списка, где userID начинается с 23.

renderItems(myList) {
    return (
      <div className="report-table">
        <div className="report-table-header">
          <div className="report-table-cell">header1</div>
          <div className="report-table-cell">header2</div>
          <div className="report-table-cell">header3</div>
          <div className="report-table-cell">header4</div>
          <div className="report-table-cell">header5</div>
          <div className="report-table-cell">header6</div>
          <div className="report-table-cell">header7</div>
          <div className="report-table-cell">header8</div>
        </div>
        <div className="report-table-header">
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
          <div className="report-table-cell"><input></input></div>
        </div>

          {mySortedList.map(item => (
          <MyListItem key={item.id} {...item} />
        ))}
      </div>
    );
}

Есть какие-нибудь предложения, которые помогут мне начать работу?

Answer 1

Итак, основной жизненный цикл c React заключается в том, что вы используете переменную this.state в своем конструкторе () (со значениями по умолчанию). Используйте это для хранения как ваших поисковых запросов, так и ваших данных.

Вам понадобится тег с вашими элементами управления <input> / <select>, которые имеют событие onChange(), запускающее this.setState(). Это вызовет componentDidUpdate(prevProps, prevState, snapshot). Проверьте, изменились ли ваши условия поиска, а затем обновите this.state.data любой необработанной информацией, которую вы хотите отобразить в своем списке.

render() затем сможет зацикливаться / отображать this.state.data для отображения вашего list.

Прочтите о жизненном цикле компонентов React

• https://reactjs.org/docs/react-component.html

Вот пример недавнего кода Я написал, показывая этот шаблон.

• https://github.com/JamesMcGuigan/elasticsearch-tweets/blob/master/src/components/TweetHeatMap/TweetHeatMap.jsx
• https://tweets.elasticsearch.jamesmcguigan.com/ (результат веб-страницы)

Answer 2

Это довольно банальная проблема. Вы можете использовать библиотеку для таблиц (буквально любую, например https://github.com/tannerlinsley/react-table). Или вы можете написать код самостоятельно. Пока количество заголовков равно c, вы можете собрать значения фильтра в некоторый объект:

const filters = {
  name: '', // no filtering for this header
  city: 'island', // this header has a user input
}

Позже вы можете использовать load sh _.filter(rows, filters)