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 （应作为函数）。你没有初始化这样的变量并得到这个

但是它抱怨c是不确定的。

Answer 2

尝试给出类似的东西

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

Answer 3

尝试onClick={(index === 1 || index === 2) ? () => props.setOrderBy(c.key) : null}

Answer 4

也许您可以在处理程序内部添加支票？

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

您也可以提取数组函数以简化代码：

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

....

onClick={onClick}>

如何有条件地启用onClick

4 个答案: