Estoy usando react-redux y redux-form para mi nuevo proyecto. Cuando creo un campo de selección personalizado, nunca pasa el valor de la primera opción (que ya está "seleccionado") a la función handleSubmit. Solo cuando selecciono manualmente un valor, pasa el valor de la opción correctamente.
Selección personalizada:
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> );Componente de formulario:
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);¿Tengo que inicializar la selección desde el estado redux? ¿O hay otra forma de forzar que el primer valor sea el valor inicial?
¡Gracias por adelantado!
Hay varias formas de inicializar su formulario.
componentWillMount () { this.props.initialize({ title: 'Codifly' }); }Ver documentos: http://redux-form.com/6.4.3/docs/api/ActionCreators.md/
export default reduxForm({ form: 'register', initialValues: { title: 'Codifly' } })(RegisterForm);http://redux-form.com/6.4.3/docs/api/Props.md/
¡Espero que esto ayude!