#javascript #reactjs #function #sorting #events
#javascript #reactjs #функция #сортировка #Мероприятия
Вопрос:
Я реализую сортировку таблицы в модальном окне. Я написал этот код, но он неверен.
<ExtendedModalBar
list={this.state.modalList}
onCancel={this.handleExtendedModalClose}
onSave={(...args) => this.handleSaveFromModal(...args)}
selectedItems={this.state.modalItems}
show={this.state.showExtendedModal}
type={this.state.modalType}
//onClick={this.onSort('', )}
sortColumn={this.onSort('isSecure', this.state.modalList); this.onSort('profile', this.state.modalList)}
/>
Моя функция:
onSort = (column, dataToSort) => (event) => {
const direction = this.state.sort.column ? (this.state.sort.direction === 'asc' ? 'desc' : 'asc') : 'desc';
dataToSort.sort((a, b) => {
if ( typeof(a[column]) === 'string' amp;amp; typeof(b[column]) === 'string' ) {
const nameA = a[column].toUpperCase(); // ignore upper and lowercase
const nameB = b[column].toUpperCase(); // ignore upper and lowercase
if (nameA < nameB ) {
return -1;
}
if (nameA > nameB) {
return 1;
}
// names must be equal
return 0;
}
if( typeof(a[column]) === 'number' amp;amp; typeof(b[column]) === 'number'){
return a[column] - b[column];
}
if(typeof(a[column]) === 'boolean' amp;amp; typeof(b[column]) === 'boolean'){
const firstBool = (a[column]);
const secondBool = (b[column]);
return firstBool - secondBool;
}
}
);
if (direction === 'desc') {
dataToSort.reverse();
}
this.setState({
sort: {
column,
direction,
}
});
};
Моя функция сортировки принимает два аргумента: ColumnName и data. если я вызываю функцию в onClick только один раз, она сортирует только один столбец. как вызвать функцию несколько раз и передать разные аргументы, т. е. разные имена столбцов?
Комментарии:
1. Вы пробовали что-то подобное
onClick={() => ... the code in sortColumn...}? Если вы вызываете дваждыonSortдля одного и того же набора данных, правильно ли он сортируется?2. немного не понимаю. Мне нужно передать имя каждого столбца в виде строки в мою функцию onSort, чтобы отсортировать каждый столбец таблицы, а не только один точный столбец. Да, набор тот же, но функция принимает также columnname
3. пожалуйста, посмотрите на мою функцию. Я отредактировал вопрос
Ответ №1:
Возможно, проблема связана со следующим: onClick атрибут ожидает только одну функцию. Я бы попробовал что-то вроде этого:
onClick={(event) =>
this.onSort('isSecure', this.state.modalList)(event);
this.onSort('profile', this.state.modalList)(event);
}
или какой-нибудь более элегантный, но эквивалентный код. Надеюсь, это поможет — Carlos
Комментарии:
1. если бы я написал это: onClick={(событие) => this.onSort(‘isSecure’, this.state.modalList)(событие); this.onSort(‘profile’, this.state.modalList)(событие); } компилятор говорит, что ожидается синтаксическая ошибка «}»
2. Я преодолел проблему с синтаксической ошибкой, но теперь отсортирован только один столбец, второй — нет.
3. странно! Не могли бы вы добавить оператор
console.logoralertвonSortфункцию, чтобы быть уверенным, что она вызывается только один раз?4. ваш приведенный выше код выдает синтаксическую ошибку. Я написал это: sortColumn={(e) => {this.onSort(‘isSecure’, this.state.modalList)(e); this.onSort (‘profile’, this.state.modalList) (e);}} и синтаксическая ошибка удалена, я добавил журнал консоли, я получил журналы дважды, но отсортирован только один столбец
5. Следовательно, проблема заключается в функции. Я предполагаю, что, хотя критерии сортировки связаны только с выбранным столбцом, массив , который вы сортируете, — это весь массив. Если вы хотите, чтобы столбцы сортировались независимо друг от друга, было бы удобнее иметь отдельный массив для каждого столбца. Вашим
modalListможет быть объект, включающий все массивы. Конечно, этоrenderусложнило бы задачу, но я не могу представить более простую альтернативу. Напомним, что функция, которую вы передаете, например, вArray.map, имеет дополнительный аргумент для индекса .