Material UI Select组件结合Redux Forms时回车键交互异常

我之前在使用redux-form结合Material UI的Select组件时也碰到过完全一样的问题！当用键盘快速选择选项后按回车，不仅选中的内容没显示出来，还直接触发了表单校验，确实挺头疼的。

问题根源 #

这个问题本质是redux-form的事件处理逻辑和Material UI Select组件的键盘交互逻辑冲突：当你按下回车键时，redux-form的表单校验/提交监听抢先捕获了事件，而没让Select组件完成选项确认的动作。

两种可行的解决办法 #

方案1：给Select组件自定义回车事件处理

我们可以手动监听Select的键盘事件，当检测到回车键时，先完成选项的选中操作，再阻止事件冒泡，避免被redux-form的逻辑干扰：

import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

// 自定义键盘事件处理函数
const handleSelectKeyDown = (event, handleChange, selectedOption) => {
  if (event.key === 'Enter') {
    // 手动触发选项变更，把选中的值传给表单的change handler
    handleChange(selectedOption);
    // 阻止事件往上冒泡，避免触发redux-form的校验逻辑
    event.stopPropagation();
  }
};

// 在表单中使用自定义后的Select
<Field
  name="color"
  component={({ input, meta }) => (
    <Select
      {...input}
      onKeyDown={(e) => handleSelectKeyDown(e, input.onChange, input.value)}
      error={meta.touched && meta.error}
    >
      <MenuItem value="red">Red</MenuItem>
      <MenuItem value="green">Green</MenuItem>
      <MenuItem value="blue">Blue</MenuItem>
    </Select>
  )}
/>

方案2：调整redux-form的校验触发时机

如果你的业务场景允许，也可以修改redux-form的配置，让校验只在表单提交时触发，而不是在键盘操作或失焦时触发：

import { reduxForm } from 'redux-form';

const ColorForm = (props) => {
  // 表单内容...
};

// 配置redux-form，关闭实时校验
export default reduxForm({
  form: 'colorForm',
  validateOnChange: false, // 关闭输入变更时的校验
  validateOnBlur: false    // 关闭失焦时的校验
})(ColorForm);

测试验证 #

修改完代码后，按以下步骤验证：

• 点击Select字段聚焦，按下字母'G'选中'Green'选项
• 按下回车键，确认Select字段正常显示'Green'，同时不会触发不必要的表单校验提示

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