Edge与IE下Redux Form复选框初始值为true刷新状态异常

我之前维护旧项目时也碰到过一模一样的问题——用Redux Form的initialValues把复选框初始值设为true，首次加载一切正常，但在Edge和IE里刷新后，复选框显示未勾选但表单值还是true，甚至每次刷新状态会来回切换。结合你用的redux-form 7.2.3和react 15.6.2版本，这大概率是旧浏览器的表单状态缓存机制和Redux Form的初始值同步逻辑冲突导致的，下面给你几个靠谱的解决办法：

方案1：禁用浏览器表单状态缓存 #

旧版Edge和IE会自动缓存表单控件的状态，刷新时会优先恢复这个缓存状态，直接覆盖Redux Form的initialValues。我们可以通过添加autocomplete="off"属性来阻止这个行为，注意要同时给表单和复选框都加上（IE对属性大小写敏感，建议用小写）：

<form onSubmit={handleSubmit} autocomplete="off">
  <Field
    name="myCheckbox"
    component="input"
    type="checkbox"
    autocomplete="off"
  />
</form>

方案2：手动强制同步表单值与DOM状态 #

如果方案1没生效，可以在组件挂载或更新时，手动调用Redux Form的change action来同步值，确保DOM状态和表单内部值完全一致：

import { change } from 'redux-form';

class YourForm extends React.Component {
  componentDidMount() {
    // 挂载后强制同步初始值到DOM
    const { dispatch, initialValues } = this.props;
    dispatch(change('yourFormName', 'myCheckbox', initialValues.myCheckbox));
  }

  componentDidUpdate(prevProps) {
    // 若初始值变化，重新同步
    if (this.props.initialValues.myCheckbox !== prevProps.initialValues.myCheckbox) {
      const { dispatch } = this.props;
      dispatch(change('yourFormName', 'myCheckbox', this.props.initialValues.myCheckbox));
    }
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <Field
          name="myCheckbox"
          component="input"
          type="checkbox"
        />
      </form>
    );
  }
}

export default reduxForm({
  form: 'yourFormName',
  initialValues: { myCheckbox: true }
})(YourForm);

方案3：使用自定义受控复选框组件 #

原生checkbox在旧浏览器里的状态绑定可能存在隐性bug，我们可以自己封装一个完全受控的复选框组件，直接通过props控制checked状态，绕开Redux Form和浏览器DOM的冲突：

// 自定义复选框组件
const CustomCheckbox = ({ input, label }) => (
  <label>
    <input
      type="checkbox"
      checked={input.value}
      onChange={input.onChange}
      autocomplete="off"
    />
    {label}
  </label>
);

// 在表单中使用
<Field
  name="myCheckbox"
  component={CustomCheckbox}
  label="我的复选框"
/>

建议先试方案1，最简洁高效；如果不行再依次尝试方案2和3，这几个方法在我之前的旧项目里都成功解决过类似的Edge/IE兼容问题。

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