Redux 形式自定义 select 不使用第一个值

Question

我正在为我的新项目使用 react-redux 和 redux-form。当我创建自定义 select 字段时，它从不将第一个选项值（已经是 "selected"）传递给 handleSubmit 函数。只有当我手动 select avalue 时，它才能正确传递选项值。

自定义 select:

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 状态初始化 select 吗？或者有没有其他方法强制第一个值是初始值？

提前致谢！

Answer 1

初始化表单的方法有多种。

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

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

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

使用 initialValues 传递默认值:

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

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

希望对您有所帮助！

Redux 形式自定义 select 不使用第一个值

Redux-form custom select not using first value

reactjs

redux

redux-form