如何在React.js中将输入聚焦逻辑封装为可复用函数？

核心思路 #

把重复的聚焦处理逻辑抽离成通用函数，每个输入框只需传递对应的数据源项和事件对象即可复用逻辑，避免代码冗余。

具体实现步骤 #

1. 定义通用处理函数
   将解析数据、计算参数、调用move_box_click的逻辑封装成一个可复用的函数，同时优化重复的字符串拆分操作：

const handleInputFocus = (dataItem, e) => {
  // 校验数据源有效性，避免报错
  if (!dataItem?.name) return;
  
  // 拆分并转换为数字类型，解构赋值提升可读性
  const [x, y, endX, endY] = dataItem.name.split(",").map(Number);
  
  // 计算所需参数
  const posX = x * docWidth;
  const posY = y * docHeight;
  const boxHeight = endY * docHeight - posY + 2;
  const boxWidth = endX * docWidth - posX + 2;
  
  // 调用目标方法
  move_box_click(posX, posY, boxHeight, boxWidth, e);
};

2. 在输入框中复用函数
   每个输入框的onFocus事件只需调用这个通用函数，并传入对应的数据源子项（如data.One、data.Two）和事件对象：

<input
  type="text"
  onFocus={(e) => handleInputFocus(data?.One, e)}
/>

<input
  type="text"
  onFocus={(e) => handleInputFocus(data?.Two, e)}
/>

优化点说明 #

• 使用可选链操作符?.避免data或子项不存在时抛出错误
• 只执行一次split操作并转换为数字，减少重复计算，提升性能
• 解构赋值让参数含义更清晰，代码可读性更强

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