React Select筛选无结果按回车刷新页面且事件阻塞如何解决

问题原因 #

页面回车刷新的核心是浏览器原生表单机制触发的：当你的Select组件放在只有一个输入框的<form>标签内时，按下回车键会默认触发表单提交，导致页面重载。

• 有匹配下拉选项时，React Select内部会拦截回车事件用于选中选项，不会冒泡到表单，因此不会刷新
• 无匹配选项时，React Select不会处理回车事件，事件冒泡到表单就触发了默认提交刷新
  你之前全局拦截所有回车事件的写法会直接阻断React Select内部的回车选中逻辑，所以正常场景下的onChange回调也无法触发。

解决方案 #

方案1：拦截外层表单默认提交（最推荐，改造成本最低） #

直接给包裹Select的form标签添加提交拦截逻辑，完全不需要修改Select原有配置：

<form onSubmit={(e) => e.preventDefault()}>
  {/* 删掉原来加的全局回车拦截逻辑即可 */}
  <Select
    value={makeItNull}
    placeholder={'Search...'}
    options={options}
    openMenuOnClick={false}
    closeMenuOnSelect={true}
    escapeClearsValue={true}
    isClearable={true}
    onChange={(obj) => {
      filterCondidateList(obj.value)
    }}
  />
</form>

方案2：按需拦截无匹配场景的回车 #

如果无法修改外层表单逻辑，可以改造onKeyDown逻辑，仅在无匹配选项时阻止默认行为，保留正常场景的回车触发逻辑：

// 新增state受控管理输入框内容
const [inputValue, setInputValue] = useState('');

<Select
  value={makeItNull}
  placeholder={'Search...'}
  options={options}
  openMenuOnClick={false}
  closeMenuOnSelect={true}
  escapeClearsValue={true}
  isClearable={true}
  // 新增输入值受控配置
  inputValue={inputValue}
  onInputChange={(val) => setInputValue(val)}
  onKeyDown={(e) => {
    if (e.code === "Enter") {
      // 判断当前输入是否有匹配选项
      const hasMatchedOption = options.some(
        item => item.label.includes(inputValue) || item.value.includes(inputValue)
      )
      // 仅无匹配时阻止默认提交，可同时自定义无匹配场景的搜索逻辑
      if (!hasMatchedOption) {
        e.preventDefault();
        // 若需要无匹配时按当前输入值搜索，直接调用筛选方法即可
        // filterCondidateList(inputValue)
      }
    }
  }}
  onChange={(obj) => {
    filterCondidateList(obj.value)
  }}
/>

内容的提问来源于stack exchange，提问作者SEMER BEN SALEM