React中如何将Event对象作为第二个参数传入回调并解决报错？

错误提示Cannot read properties of undefined (reading 'stopPropagation')说明handleQueryChange里的e参数未被正确传入，核心原因是自定义组件QueryInput在调用setSearchQuery时，只传递了第一个参数q，没有传递事件对象event。你可以按以下步骤修正：

1. 确保QueryInput内部正确传递事件对象 #

打开QueryInput组件的源码，找到调用setSearchQuery的位置，确保触发回调时同时传入输入值和事件对象。

比如针对你的Tab键需求，QueryInput内部监听键盘事件的代码应该类似：

// QueryInput组件内部
const handleKeyDown = (e) => {
  // 获取当前输入的文本值
  const currentQuery = inputRef.current.value;
  // 调用父组件传入的回调，同时传值和事件对象
  setSearchQuery(currentQuery, e);
};

// 渲染时绑定事件
return (
  <div onKeyDown={handleKeyDown} contentEditable>
    {/* 组件内部结构 */}
  </div>
);

如果是监听输入变化事件，内部代码应为：

// QueryInput组件内部
const handleInputChange = (e) => {
  const q = e.target.value;
  setSearchQuery(q, e);
};

return <input type="text" value={query} onChange={handleInputChange} />;

2. 简化父组件的回调传递 #

只要QueryInput内部正确传递了两个参数，父组件可以直接传递handleQueryChange，无需额外包裹箭头函数：

<QueryInput
  id="queryText"
  query={query || ""}
  setSearchQuery={handleQueryChange}
/>

你原来的箭头函数写法(q, event) => handleQueryChange(q, event)本身没问题，但前提是QueryInput确实传递了第二个参数。

3. 针对Tab键的优化（可选） #

如果仅需在按下Tab键时阻止默认行为和冒泡，也可以在QueryInput内部直接处理，无需将事件传到父组件，职责划分更清晰：

// QueryInput组件内部
const handleKeyDown = (e) => {
  if (e.key === 'Tab') {
    e.preventDefault();
    e.stopPropagation();
    // 这里可添加保持光标位置的逻辑
  }
  // 正常触发输入回调
  const currentQuery = inputRef.current.value;
  setSearchQuery(currentQuery);
};

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