Блог

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

В дочернем компоненте у меня есть выбор, поле выбора отображает выбор со стилизованным компонентом :

 <SelectField 
    onChange={props.triCallback}
>
    <option data-sort="date" data-dir="desc">Filter by</option>
    <option data-sort="date" data-dir="asc">Date asc</option>
    <option data-sort="date" data-dir="desc">Date desc</option>
    <option data-sort="answers" data-dir="asc">Answers asc</option>
    <option data-sort="answers" data-dir="desc">Answers Desc</option>
</SelectField>
 

И в моем App.js у меня есть этот метод, который обрабатывает сортировку :

 constructor(props) {
    super(props);
    this.state = {
      sorting : 'date',
      sortDir : 'desc',
    };
}

onTriChanged = data => {
    const sorting = data.target.dataset.sort;
    const sortDir = data.target.dataset.dir;
    this.setState({
      sortDir: sortDir,
      sorting: sorting
    }, () => {
        this.fetchData()
    });
};
 

Поскольку <SelectField> на самом деле визуализируется родной <select> язык, то это довольно прямолинейно. Причина data.target.dataset... , по которой возвращает значение не определено, заключается в том, что data- атрибуты HTML5, которые вы хотите получить, фактически находятся в выбранном <option> элементе, а не в <select> элементе, на который ссылается последний data.target .

Поэтому вам нужно будет получить доступ к <option> элементу выбора, используя selectedIndex свойство. <select> Элемент позволяет нам получить доступ к вложенной коллекции <option> элементов с помощью options свойства.

 onTriChanged = data => {
    const selectedOption = data.target.options[data.target.selectedIndex];
    const sorting = selectedOption.dataset.sort;
    const sortDir = selectedOption.dataset.dir;
    this.setState({
      sortDir: sortDir,
      sorting: sorting
    }, () => {
        this.fetchData()
    });
};