javascript - 设置条件 onClick 行为时遇到问题

Question

我有一个允许对列进行排序的 Material UI 表。我的专栏如下:

const columnData = [
    { id: 'name', numeric: false, disablePadding: true, label: 'Fichier' },
    { id: 'lecture', numeric: false, disablePadding: false, label: 'Lecture' },
    { id: 'tags', numeric: true, disablePadding: false, label: 'Tags' },
    { id: 'creation_time', numeric: true, disablePadding: false, label: 'Date d\'ajout' },
    { id: 'action', numeric: false, disablePadding: false, label: 'Action' },
];

我希望能够仅对“名称”和“创建时间”进行排序。但是，排序方法并不相同，因为 name 是字母数字，creation_time 是日期

我已经创建了我的函数，现在当我尝试每个函数时，它们只是在控制台中添加“function x clicked”，但我想在正确的时间只拥有它们。这是我到目前为止的尝试:

<TableSortLabel
 active={orderBy === column.id}
 direction={order}
 onClick={() => { column.id === 'name' ?
 this.createSortNameHandler(column.id) :
 column.id === 'creation_date' ?
 this.createSortDateHandler(column.id) : console.log('nope')}}
 >

如果我没有犯错，这应该相当于(大致)

if(column.id === 'name') {
  onClick = this.createSortNameHandler(column.id);
else if(column.id === 'creation_date') {
  onClick = this.createSortDateHandler(column.id);
} else {
console.log('nope');
}

到目前为止，当我点击“Fichier”/“name”时，我什么也没得到，但一旦我点击其他任何东西，我就会得到“不”。

我应该怎么做才能解决这个问题？预先感谢您

Answer 1

您正在创建排序处理程序，但没有调用它们。试试这个:

onClick={() => {
  (column.id === 'name' ? this.createSortNameHandler(column.id) :
    (column.id === 'creation_date' ? this.createSortDateHandler(column.id) :
      () => { console.log('nope') }
    )
  )()
}}

或者更简单的版本:

onClick={column.id === 'name' ?
  this.createSortNameHandler(column.id) :
  (column.id === 'creation_date' ? this.createSortDateHandler(column.id) :
    () => { console.log('nope') }
  )
}}