React中输入框按下Enter键时onKeyDown事件未触发的问题

嘿，我来帮你搞定这个需求！你想要在输入框按下Enter键时触发搜索更新，对吧？我看你的代码还没写完，不过核心问题应该是如何正确绑定Enter键的触发逻辑，下面给你一步步说清楚：

首先，你需要给SearchInput组件添加onKeyDown事件监听，不过这里要注意一个关键点：如果SearchInput是你自己封装的自定义组件，必须把onKeyDown这个props透传给内部的原生<input>元素，不然事件根本不会触发！

先给你补全并修正你的代码：

<SearchInput
  placeholder={formatMessage('SV_UNIT_LIST_SEARCH_PLACEHOLDER')}
  value={searchState.searchText}
  onChange={(event) => {
    const inputValue = (event.target as unknown as HTMLInputElement).value;
    // 这里别直接赋值searchText！React状态必须用对应的更新方法
    // 比如如果是用useState的话：setSearchText(inputValue);
    // 如果是redux的话，应该dispatch一个更新文本的action
    if (inputValue === '') {
      dispatchSearch(updateSearch({ newSearch: /* 这里填你对应的空搜索状态 */ }));
    }
  }}
  // 新增Enter键监听
  onKeyDown={(event) => {
    // 用event.key判断更直观，keyCode已经被废弃啦
    if (event.key === 'Enter') {
      // 这里执行你的搜索逻辑，比如dispatch搜索action
      dispatchSearch(updateSearch({ newSearch: searchState.searchText }));
    }
  }}
/>

如果SearchInput是自定义组件，一定要确保它把事件传递给原生input，比如你的自定义组件得这么写：

const SearchInput = ({ placeholder, value, onChange, onKeyDown, ...restProps }) => {
  return (
    <input
      type="text"
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      onKeyDown={onKeyDown} // 必须把这个事件传进去！
      {...restProps}
    />
  );
};

另外还要提醒你：直接searchText = inputValue这种赋值方式在React里是无效的，状态更新必须用React提供的方法（比如setState、useState的更新函数，或者redux的dispatch），不然组件不会重新渲染，状态也不会同步。

备注：内容来源于stack exchange，提问作者Bogdan