Question

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

自定义选择：

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-form自定义选择不使用第一个值

1 个答案: