javascript - 如何有条件地启用 onClick

Question

我正在通过映射我的数据创建一个表，我正在尝试创建一个 TableSortLable，但我只想让用户能够按前两列进行排序。

          {
            Columns.map(c,index => {
              return (
                <TableCell key={c.key} component="th" padding="checkbox">
                  <TableSortLabel 
                     active={props.brokersListOrderByColumn === c.key}
                     direction={props.brokersListSortOrder}
                     onClick={() => props.setOrderBy(c.key)}>
                     {c.label}
                  </TableSortLabel>
                </TableCell>
              )
            })
          }

我正在考虑使用 onClick 事件，并且仅在第一列或第二列时启用它。我试过类似的东西:

   {(index === 1 || index ===2) && onClick={() => props.setOrderBy(c.key)}}>

或者有条件地设置 onClick 值，但两者都不起作用。

我也试过有条件地设置 TableSortOrder :

                <TableCell key={c.key} component="th" padding="checkbox">
                  {(index === 1 || index === 2) && <TableSortLabel 
                     active={props.brokersListOrderByColumn === c.key}
                     direction={props.brokersListSortOrder}
                     onClick={() => props.setOrderBy(c.key)}>
                     {c.label}
                  </TableSortLabel>}
                  {(index !== 1 && index !== 2) && c.label}
                </TableCell>

但它提示 c 未定义

Answer 1

语法错误。您应该为仿函数编写括号中的参数。像这样

Columns.map((c, index) => {...

否则引擎将尝试查找 (RHS) 变量 c(预期为函数)。你没有初始化这样的变量并得到这个

But it complains c is undefined .