Как установить состояние столбца сортировки как «как c» после нажатия на новый столбец и изменить состояние сортировки «как c»: «des c» при нажатии на выбранный столбец в React - PullRequest
Новая
       0

Как установить состояние столбца сортировки как «как c» после нажатия на новый столбец и изменить состояние сортировки «как c»: «des c» при нажатии на выбранный столбец в React

0 голосов
/ 19 марта 2020

У меня проблема с состоянием сортировки.

Я хотел бы установить сортировку столбцов по возрастанию каждый раз, когда я изменяю выбор своего столбца и меняю состояние как «как c», а затем «des c» и c.

Когда я нажимаю на тот же столбец. Метод getHeaderName возвращает фактически выбранное имя заголовка и работает правильно. Метод sortedMethod просто имеет механизм сортировки (работает хорошо) и устанавливает состояние имени столбца, ранее выбранного и фактически выбранного: 

private sortedMethod(columnName: HeaderNameDictionary) {
  this.sortedMechanism(columnName);
  this.setState({ previousColumn: this.state.sortedColumnName })
  this.setState({ sortedColumnName : columnName})
}

Я думаю, что проблема заключается в методе "setStateSelectedColumn". В этом методе я проверяю состояние текущих и предыдущих имен столбцов и в зависимости от него устанавливаю состояние «isAscending». Но это не работает хорошо. 

private setStateSelectedColumn(columnName: HeaderNameDictionary) {
  if ((this.state.previousColumn !== this.state.sortedColumnName )) {
    this.setState({ isAscending: true })
  } else {
    this.setState({ isAscending: !this.state.isAscending })
  }
}

Когда я меняю столбец и щелкаю каждый раз на другом столбце, он работает хорошо и
меняет состояние как есть c: true,
, но когда я :
изменить столбец - isAs c: true,
Нажмите еще раз на этот столбец - isAs c: true,
Нажмите еще раз на этот столбец - As As c: false ,
Щелкните еще раз по этому столбцу - как As c: true,
Щелкните еще раз по этому столбцу - как As c: false,

Второй щелчок по тому же столбец проблематичен c и не меняет состояние. 

<th>
  Product Code
  <span
    className={this.getHeaderName(HeaderNameDictionary.PRODUCT_CODE)}
    onClick={() => {
      this.setState({}, () => {
        this.setStateSelectedColumn(HeaderNameDictionary.PRODUCT_CODE);
      });
      this.sortedMethod(HeaderNameDictionary.PRODUCT_CODE);
    }}
  />
</th>;

У вас есть идеи, как это исправить? Спасибо!

1 Ответ

0 голосов
/ 19 марта 2020

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

Вот простой пример. 

class Sample extends React.Component {

  constructor() {
    super();
    this.initData = [
        {name: 'John', family: 'Doe'},
        {name: 'Jane', family: 'Hardy'}
      ];
    this.state = {
      sortField: 'name',
      sortOrder: 'asc',
      data: this.initData
    };
  }

    sort(column) {
        this.setState(prevState => {
            if (prevState.sortField === column) {
                const sortOrder = prevState.sortOrder === 'asc' ? 'desc' : 'asc';

                return {
                    sortOrder,
                    data: [...prevState.data].sort((a, b) => {
                        const textA = a[column].toUpperCase();
                        const textB = b[column].toUpperCase();
                        if (sortOrder === 'asc') {
                            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
                        }
                        else {
                            return (textA > textB) ? -1 : (textA < textB) ? 1 : 0;
                        }
                    })
                }
            }
            else {
                return {
                    sortOrder: 'asc',
          sortField: column,
                    data: [...prevState.data].sort((a, b) => {
                        const textA = a[column].toUpperCase();
                        const textB = b[column].toUpperCase();
                        return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
                    })
                }
            }
        })
    }

  render() {
     return (
       <table>
         <thead>
           <th onClick={() => this.sort('name')}>Name</th>
           <th onClick={() => this.sort('family')}>Family</th>
         </thead>
         <tbody>
           {
             this.state.data.map(({name, family}, i) => {
               console.log(name, family)
               return (
                 <tr key={i}>
                   <td>{name}</td>
                    <td>{family}</td>
                 </tr>
               )
             })
           }
         </tbody>
       </table>
     )
  }
}

React.render(<Sample />, document.getElementById('app'));
...