Redux-form 自定义选择不使用第一个值

Question

我正在为我的新项目使用 react-redux 和 redux-form。当我创建自定义选择字段时，它永远不会将第一个选项值（即已经“选择”）传递给 handleSubmit 函数。只有当我手动选择一个值时，它才能正确传递选项值。

自定义选择：

const Select = ({ input, options, disabled }) => (
  <div>
    <select {...input} disabled={disabled}>
      { options.map(option =>
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      )}
    </select>
  </div>
);

表单组件：

function RegisterForm({ handleSubmit, titles }) {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title</label>
      <Field name="title" options={titles} component={Select} />

      <button type="submit">Submit</button>
    </form>
  );
}

RegisterForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  titles: PropTypes.array.isRequired,
};

export default reduxForm({
  form: 'register'
})(RegisterForm);

我是否必须从 redux 状态初始化选择？还是有另一种方法可以强制第一个值成为初始值？

提前致谢！

Answer 1

有多种方法可以初始化表单。

1. 使用redux-form提供的initializeForm函数，通过props传递：

componentWillMount () {
  this.props.initialize({
    title: 'Codifly'
  });
}

请参阅文档：http : //redux-form.com/6.4.3/docs/api/ActionCreators.md/

2. 使用initialValues传递默认值：

export default reduxForm({
  form: 'register',
  initialValues: {
    title: 'Codifly'
  }
})(RegisterForm);

http://redux-form.com/6.4.3/docs/api/Props.md/

我希望这有帮助！