如何为Material UI Box组件实现条件点击与启用禁用效果

实现思路 #

直接把原来独立按钮的所有逻辑迁移到外层票务卡片容器上，删掉多余的button元素即可，主要处理三个点：

• 事件绑定：只有数据满足可用条件（ticket.ticketsOverview.length >=7）时，才给Box绑定选中回调，禁用状态不绑定点击事件
• 样式区分：禁用状态给卡片加禁止点击的视觉提示，包括半透明、鼠标移上去显示禁用图标、屏蔽点击事件；可用状态加手型鼠标、hover阴影提示用户可以点击
• 文本提示：把原按钮上的「NOT AVAILABLE」「Select」状态文本放到卡片里原来按钮的位置，和状态联动显示

代码示例 #

首先补全对应的样式（如果你用JSS写法的话，原有样式不用动，追加状态相关的配置就行）：

const useStyles = makeStyles({
  bookingTicketContainer: {
    // 原有容器样式保留，追加基础交互样式
    cursor: 'pointer',
    transition: 'box-shadow 0.2s ease',
    '&:hover': {
      boxShadow: '0 2px 8px rgba(0,0,0,0.12)'
    },
    // 禁用态样式
    '&.is-disabled': {
      cursor: 'not-allowed',
      opacity: 0.6,
      pointerEvents: 'none',
      '&:hover': {
        boxShadow: 'none'
      }
    }
  },
  ticketStatusTip: {
    padding: '8px 16px',
    textAlign: 'right',
    fontWeight: 500
  }
  // 其他原有样式保持不动
})

然后修改JSX结构，移除原来的独立button，把逻辑绑定到外层卡片Box：

<Box 
  className={`${classes.bookingTicketContainer} ${ticket.ticketsOverview.length < 7 ? 'is-disabled' : ''}`}
  onClick={ticket.ticketsOverview.length >= 7 ? () => handleOnSelectTicket(i) : undefined}
  role="button"
  aria-disabled={ticket.ticketsOverview.length < 7}
>
  <Box className={classes.bookingBar}>
    <Box className={classes.bookingSubBox}>
      <Box className={classes.barInfoboxN1}>
        <Typography className={classes.durationDetails}> {ticket.ticketsOverview[1]}</Typography>
      </Box>
      <Box className={classes.barInfoBoxN2}>
        <Typography className={classes.changesDetails}>N/A</Typography>
      </Box>
      <Box className={classes.barInfoboxN3}>
        <Typography className={classes.transportModeDetails}>
          {ticket.ticketsOverview[2]}
        </Typography>
      </Box>
      <Box className={classes.barInfoboxN4}>
        <Typography className={classes.priceDetails}>N/A</Typography>
      </Box>
    </Box>
  </Box>
  {/* 替换原按钮的状态提示 */}
  <Typography className={classes.ticketStatusTip}>
    {ticket.ticketsOverview.length < 7 ? "NOT AVAILABLE" : "Select"}
  </Typography>
</Box>

补充说明 #

• 做双重禁用校验：不要只靠pointerEvents: none屏蔽点击，同时通过条件判断是否绑定onClick、加aria-disabled无障碍属性，避免样式加载异常时禁用状态还能触发选中
• 如果用MUI v5的sx属性写样式，不需要单独加类名，直接在sx里根据状态判断写样式即可，逻辑完全一致
• 状态提示文本的位置、样式可以根据你的UI设计调整，对齐原来按钮的位置就不会打乱现有布局

内容的提问来源于stack exchange，提问作者Sudhir