React：ListItem聚焦按回车触发函数的事件选择及value获取问题

一、事件选择与触发逻辑 #

你可以继续使用onKeyDown（或onKeyUp）事件，核心是在回调里判断是否按下回车键（建议同时支持空格键，符合通用无障碍交互规范）。示例判断逻辑：

const handleChange = (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    // 执行你的处理逻辑
    event.preventDefault(); // 阻止空格默认滚动页面的行为
  }
};

二、解决值获取的问题 #

ListItem不属于表单控件，你设置的value属性不是它的标准属性，因此event.target.value会返回null。以下是几种可行的解决方式：

方式1：直接传递参数给回调函数 #

修改onKeyDown的绑定逻辑，直接将timeline作为参数传入回调：

<ListItem 
   tabIndex={'0'} 
   className={classes.listItem} 
   key={timeline} 
   onClick={props.handleChangeTimeline} 
   onKeyDown={() => handleChange(timeline)}>
      {timeline}
</ListItem>

对应的回调函数直接接收参数：

const handleChange = (timeline) => {
  // 直接使用timeline的值，可对齐onClick的调用逻辑
  props.handleChangeTimeline({ target: { value: timeline } });
};

方式2：使用自定义数据属性（推荐，符合HTML规范） #

用data-value替代value属性，通过元素的dataset对象获取值：

<ListItem 
   tabIndex={'0'} 
   className={classes.listItem} 
   key={timeline} 
   data-value={timeline}
   onClick={props.handleChangeTimeline} 
   onKeyDown={handleChange}>
      {timeline}
</ListItem>

回调函数中获取值的逻辑：

const handleChange = (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    const timeline = event.currentTarget.dataset.value;
    props.handleChangeTimeline({ target: { value: timeline } });
    event.preventDefault();
  }
};

方式3：通过getAttribute获取自定义value属性 #

如果坚持使用value属性，可以通过getAttribute方法读取这个自定义属性：

const handleChange = (event) => {
  if (event.key === 'Enter' || event.key === ' ') {
    const timeline = event.currentTarget.getAttribute('value');
    props.handleChangeTimeline({ target: { value: timeline } });
    event.preventDefault();
  }
};

额外无障碍优化建议 #

• 优先使用event.currentTarget而非event.target：ListItem内部若有子元素，currentTarget始终指向绑定事件的ListItem本身，避免因点击子元素导致属性获取失败的问题
• 保留tabIndex="0"：确保元素可以被键盘聚焦，这是键盘无障碍的基础

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