React- Реквизит фильтрации лучших практик - PullRequest
Новая
       78

React- Реквизит фильтрации лучших практик

0 голосов
/ 08 октября 2019

Я являюсь промежуточным разработчиком в React, и я хотел бы получить совет по лучшей практике для реализации фильтрации реквизита .

Действительно, я понимаю, что я очень ограничен, когда хочудля сортировки этих реквизитов:

  1. Нужно ли переводить эти реквизиты в состояние, а затем отображать / сортировать состояние
  2. Есть ли способ для отображения и сортировки таблицы из реквизитанапрямую?

Пример:

app.js 

@connect(({ events }) => ({ events }))
class EventList extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    const { dispatch } = this.props
    dispatch({type: 'events/GET_ALL_EVENTS'})
  }

  render() {
    const { events } = this.props
    const { allEvents } = events

    return (
      <div>
        <div className="card">
           <div className="card-body">
              <EventsAfter events={allEvents} />
           </div>
         </div>
      </div>
    )
  }
}

export default EventList

EventsAfter.js 

class EventAfter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateSort: "next_3_day",
    };
  }

  sortDate = value=> {
    this.setState({ dateSort: value.target.value })
    /* NEED TO SORT PROPS ARRAY OF EVENTS HERE */
  }

  render() {
    const { events } = this.props
    const { dateSort } = this.state

    return (
      <div>
        <div className="row">
          <div className="col-lg-12">
            <div>
              <div style={{display:"inline-block", paddingBottom:'10px'}}>
                <Radio.Group size="default" value={dateSort} onChange={this.sortDate}>
                  <Radio.Button value="next_3_day">Les trois prochains jours</Radio.Button>
                  <Radio.Button value="this_week">Cette semaine</Radio.Button>
                  <Radio.Button value="next_week">La semaine prochaine</Radio.Button>
                </Radio.Group>
              </div>

            </div>
          </div>
        </div>
        <div className="air__utils__scrollTable">
          <Table
            columns={[
              {
                title: 'Evenements',
                dataIndex: 'name',
                key: 'name',
                className: 'text-gray-6',
              },
              {
                title: 'Date',
                dataIndex: 'date',
                key: 'date',
                className: 'text-gray-6',
                render: d => {
                  return <Moment format='LLL'>{d}</Moment>
                },
                sorter: (a, b) => a.date.size - b.date.size,
              }
            ]}
            dataSource={events}
            scroll={{ x: '100%' }}
          />
        </div>
      </div>
    )
  }
}

export default EventAfter

В первом файле я отправляю события (таблицу) дочернему компоненту ' EventAfter '. Во втором файле, когда пользователь нажимает переключатель, он изменяет состояние сортировки ( next_3_day, this_week, next_week ).

Я хотел бы (но я могу 't) сортировать и отображать только те события, которые соответствуют критерию, без изменения исходной таблицы (чтобы я мог отобразить всю таблицу).

Вы можете мне помочь? Правильно ли я реагирую на эту часть или шаблон существует?

Большое спасибо, это очень мне поможет.

Ответы [ 2 ]

1 голос
/ 08 октября 2019

В вашем столбце таблицы уже есть функция сортировки, позволяющая переупорядочивать, поэтому вам не нужно сохранять отсортированные значения в состоянии.

Хотя у вас есть что-то под названием dateSort: "next_3_day", которое якобы выглядит так, как будто вы хотитеотфильтруйте ваш набор данных (не просто сортируйте), это другой вопрос.

Похоже, вы хотите сделать следующее:

dataSource={this.state.dateSort === 'next_3_day' ? events.filter(x=>x.date > new Date((new Date()).getTime() + (60*60*24*3))):this.events}

[и расширитьдля других 3-х опций dateSorts`]

Лично я не буду хранить отфильтрованное значение в состоянии, я просто создам функцию, которая его фильтрует.

Вы устанавливаете состояние с помощью dateSort, поэтому компонент будет повторно визуализирован и позволит передавать новые данные из родительского компонента.

Я бы также предложил использовать https://date-fns.org/ для упрощенной арифметики дат здесь.

Я не вижу тип ваших входных данных, но a.date.size мне кажется немного подозрительным. Ваша сортировка в настоящее время работает с этим значением?

0 голосов
/ 08 октября 2019

В вашем случае лучше назвать это фильтрацией вместо сортировки, в противном случае звучит немного запутанно, сортировка обычно означает упорядочение ...

Но да, лучше создать свойство в состоянии, которое будет содержать фильтрованный илиупорядоченный массив. 

this.setState({ 
  dateSort: value.target.value 
  eventsFiltered: this.props.event.filter(someFilterFunc)
})

и передача дочерним компонентам this.state.eventsFiltered

...