React移动端键盘onChange、onKeyDown等事件失效问题求助

数据老陈

2026-8-7

React移动端输入onChange不触发问题解决

核心问题排查与修复

修正事件参数类型
你的inputChangeUpdate函数参数类型错误，应该是React.ChangeEvent<HTMLInputElement>而非React.InputHTMLAttributes<HTMLInputElement>，类型不匹配会导致无法正确读取e.currentTarget.value。
恢复受控组件的value绑定
不要注释value={textboxValue}，React受控组件需要双向绑定value和状态，否则在移动端虚拟键盘场景下容易出现状态不同步，导致输入事件无法正常触发。
尝试onInput事件作为备选
部分移动端浏览器对onChange的触发时机有差异，onInput事件对虚拟键盘的输入响应更直接，可以作为fallback方案。

修正后的完整代码示例

Input元素代码

<input
  title="Enter Search Term"
  placeholder="Enter term..."
  className="h-8 w-full p-1 text-black text-m"
  value={textboxValue}
  onChange={inputChangeUpdate}
  // 可选：如果onChange仍有问题，添加onInput
  onInput={inputChangeUpdate}
/>

处理函数代码

const handleTextBoxUpdate = (value: string, clearSuggested?: boolean) => {
  toggleInvalidTermText(false);
  let newValue = value;
  setTextboxValue(newValue);
  if (newValue.length > 2 && !clearSuggested) {
    populateSuggestedSearch(newValue);
  } else {
    setSuggestedTerms([]);
  }
};

const inputChangeUpdate = (e: React.ChangeEvent<HTMLInputElement>) => {
  const input = e.currentTarget.value;
  handleTextBoxUpdate(input);
  console.log(input);
};