React中如何同时获取函数传入的自定义参数与事件对象event

问题原因 #

你当前的写法会在组件渲染阶段直接执行handleEnter函数，而非绑定为键盘事件的触发回调，同时事件对象e没有被正确传入函数，导致逻辑无法生效。

修复方案 #

提供两种常用修改方式，可根据习惯选择：

方式1：行内用箭头函数包裹传递参数 #

修改li标签的onKeyDown绑定逻辑，手动把事件对象和option一起传入：

<ul className="list" data-testid="lists">
  {options.map((option, i) => (
    <li
      role="button"
      tabIndex="0"
      onClick={() => {
        setSelected(option);
        setOpen(false);
      }}
      className={state.cursor === i ? "activeList" : "list-item"}
      {/* 新增箭头函数接收事件对象，再传入handleEnter */}
      onKeyDown={(e) => handleEnter(option, e)}
    >
      {option}
    </li>
  ))}
</ul>

handleEnter函数无需修改，同时建议把已被Web标准废弃的keyCode判断替换为更规范的key属性判断：

const handleEnter = (option, e) => {
  if (e.key === 'Enter') {
    setSelected(option)
    // 如果需要和点击行为一致关闭下拉，可补充 setOpen(false)
  }
};

方式2：让handleEnter返回回调函数 #

如果不想修改JSX里的绑定写法，可以调整handleEnter的定义，让它接收option后返回一个接收事件对象的回调函数：

// 调整函数定义，第一层接收option，返回的第二层函数接收事件对象
const handleEnter = (option) => (e) => {
  if (e.key === 'Enter') {
    setSelected(option)
  }
};

这种写法下原来的onKeyDown={ handleEnter(option) }不需要做修改即可正常运行。

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