Material-UI V0.20.2+React16.8.3 Autocomplete回车确认事件未触发求助

我之前也碰到过这个迁移坑，这确实是移除react-tap-event-plugin后典型的兼容性问题，咱们一步步来搞定它：

问题根源 #

在React 15时期，react-tap-event-plugin主要是解决移动端点击延迟的问题，但它同时也会影响桌面端的事件触发逻辑——你的AutoComplete组件大概率依赖这个插件绑定的事件来触发回车确认操作。而React 16.4彻底砍掉了该插件依赖的内部事件机制，导致原本的回车触发逻辑直接失效；不过上下箭头导航是原生键盘事件，所以不受影响。

解决方案 #

我们需要手动补全键盘事件的处理逻辑，确保回车能正确触发选项确认，同时彻底摆脱对废弃插件的依赖：

1. 手动监听回车事件 #

在AutoComplete组件上添加onKeyDown事件监听，捕获回车按键并主动触发值变更逻辑。

2. 确保选中项值的准确性 #

当用上下箭头选中下拉选项时，searchText已经同步为选中项的文本，此时回车要能正确映射到对应的国家代码。

修改后的代码示例 #

<AutoComplete
  fullWidth
  errorText={dirty ? error : null}
  onNewRequest={(value) => onChange(countryCodesByName[value])}
  onUpdateInput={(value) => onChange(countryCodesByName.hasOwnProperty(value) ? countryCodesByName[value] : value)}
  searchText={countries[value] || value}
  {...inputProps}
  {...custom}
  menuStyle={{ overflowY: 'auto' }}
  // 新增回车事件处理逻辑
  onKeyDown={(e) => {
    // 兼容不同浏览器的按键判断方式
    if (e.key === 'Enter' || e.keyCode === 13) {
      const currentValue = e.target.value;
      // 如果当前值是已存在的国家名称，映射为对应的代码
      if (countryCodesByName.hasOwnProperty(currentValue)) {
        onChange(countryCodesByName[currentValue]);
      } else {
        // 处理用户自定义输入的情况（如果业务需要）
        onChange(currentValue);
      }
      // 阻止默认行为，避免页面刷新或表单意外提交
      e.preventDefault();
    }
  }}
/>

额外建议 #

如果你的AutoComplete是第三方UI库（比如旧版Material-UI的组件），建议去查一下组件的官方文档，看看有没有针对React 16+的更新版本——新版本一般都已经移除了对react-tap-event-plugin的依赖，并且修复了键盘事件的兼容性问题。

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