ReactJS onFocus事件键盘导航触发无响应问题求助

嘿，我一眼就发现你代码里的问题啦！

你当前的写法：

<Input onFocus={console.error("focus" + index)}/>

这里犯了一个常见的React事件绑定错误：你直接执行了console.error，并把它的返回值（undefined）传给了onFocus。这意味着这段代码会在组件渲染的时候就立刻执行，而不是在Input获得焦点时才触发。你觉得鼠标点击时功能正常，其实只是组件初始化时的打印输出，并非点击焦点触发的；而键盘导航切换焦点时，因为根本没有绑定有效的事件处理函数，所以自然没反应。

解决方案 #

按照下面的步骤修改代码，就能解决问题：

• 正确绑定事件处理函数：把onFocus的值改成一个箭头函数（或者普通函数），这样只有当焦点事件触发时才会执行逻辑：

  // 基础写法
  <Input onFocus={() => console.error("focus" + index)} />
  
  // 如果需要用到事件对象，也可以这样写
  <Input onFocus={(event) => {
    console.error("focus" + index);
    // 这里可以添加其他操作，比如获取当前Input元素：event.target
  }} />
  

• 确保组件支持键盘聚焦：如果你用的是自定义Input组件，要检查内部的原生input元素有没有被设置tabIndex="-1"（这会让元素无法通过键盘导航聚焦），或者有没有被标记为disabled（禁用状态下元素无法获得焦点）。如果是Ant Design、Material UI这类成熟UI库的Input组件，默认都是支持键盘聚焦的，这一步可以忽略。

改完之后再测试，不管是鼠标点击还是用Tab键切换焦点，onFocus里的逻辑都会正常触发啦！

内容的提问来源于stack exchange，提问作者Олег Шилов