使用redux-form与react-select.creatable时失焦事件为何清空输入框？

我之前在使用redux-form搭配react-select.creatable时也碰到过几乎一模一样的问题，结合你用的技术栈（react 15.6.2、redux-form 7.2.0、react-select 1.2.1），大概率是受控组件状态同步不彻底导致的，下面是几个排查和解决的关键点：

1. 确保新创建的选项值同步到redux-form的store中 #

react-select.creatable创建新选项后，组件本身会显示这个值，但如果没有把它同步到redux-form管理的字段值里，当输入框失焦时，redux-form会从store中读取原来的字段值（空或旧值），导致输入框被清空。

解决方法是在onChange回调里，手动调用redux-form提供的change方法更新对应字段：

// 假设你的字段名是invoice.customerEmail
const handleSelectChange = (selectedOption) => {
  // 获取选中值（新创建的选项value就是输入的邮箱）
  const emailValue = selectedOption ? selectedOption.value : '';
  
  // 调用redux-form的change action更新store中的字段值
  props.change('invoice.customerEmail', emailValue);
  
  // 同时执行你原来的客户信息设置逻辑
  setCustomerInfo(selectedOption);
};

2. 正确绑定react-select的value与redux-form字段值 #

redux-form的字段值是字符串格式（邮箱地址），但react-select需要的是完整的option对象（包含value和label）。如果直接把字符串传给react-select的value属性，组件无法匹配到对应的选项，失焦后就会清空显示。

解决方法是把redux-form的字段值转换成对应的option对象：

// 假设你有已存在的邮箱选项列表
const existingEmailOptions = [
  { value: 'user1@example.com', label: 'user1@example.com' },
  { value: 'user2@example.com', label: 'user2@example.com' }
];

// 从redux-form的input中获取当前字段值
const currentEmail = props.input.value;

// 匹配对应的option，没有的话（就是新创建的）手动构造一个
const selectedOption = currentEmail 
  ? existingEmailOptions.find(opt => opt.value === currentEmail) || {
      value: currentEmail,
      label: currentEmail
    }
  : null;

// 渲染CreatableSelect组件
<CreatableSelect
  value={selectedOption}
  onChange={handleSelectChange}
  options={existingEmailOptions}
  // 注意要覆盖redux-form input默认的onChange，因为参数格式不兼容
  {...props.input}
  onChange={handleSelectChange}
/>

3. 检查是否有初始化/验证逻辑覆盖新值 #

如果你的redux-form配置了initialValues，并且在组件更新时重新设置了初始值，或者字段验证规则限制了邮箱必须在现有列表中，都会导致新创建的邮箱值被覆盖或清空。

• 确保initialValues只在组件首次加载时设置，不要在后续更新中重复赋值；
• 调整验证规则，不要添加“邮箱必须存在于现有列表”的限制，允许自定义邮箱通过验证：

const validateForm = values => {
  const errors = {};
  if (!values.invoice?.customerEmail) {
    errors.invoice = { customerEmail: '请填写客户邮箱' };
  }
  // 移除限制邮箱必须在现有列表的验证逻辑
  return errors;
};

总的来说，核心就是要保证react-select的状态完全由redux-form的store驱动，所有值的变更都要同步到store中，不能让组件自己维护独立的状态，这样就能避免失焦后值被清空的问题。

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