Uso redux-form para mi formulario, siguiendo el ejemplo: https://redux-form.com/8.3.0/docs/api/fields.md/
Entonces <Fields /> es así:
<Fields names={['firstName', 'lastName']} component={input} validate={{ firstName: (value, allValues, props, name) => 'error' }} warn={{ lastName: (value, allValues, props) => 'warning' }} />el componente de campos que renderizo es este
const renderFields = (fields) => ( <div> <div className="input-row"> <input {...fields.firstName.input} type="text"/> {fields.firstName.meta.touched && fields.firstName.meta.error && <span className="error">{fields.firstName.meta.error}</span>} </div> <div className="input-row"> <input {...fields.lastName.input} type="text"/> {fields.lastName.meta.touched && fields.lastName.meta.error && <span className="error">{fields.lastName.meta.error}</span>} </div> </div> )Hasta ahora todo bien, el formulario muestra los 2 campos de entrada y puedo agregarles valores.
Pero, ¿cómo paso los valores predeterminados a la entrada?
Cuando agrego la propiedad de value en la input , no puedo editar la entrada después.
Por ejemplo, agrego el accesorio de value con un valor como este:
const renderFields = (fields) => ( <div> <div className="input-row"> // add value="my name" <input {...fields.firstName.input} type="text" value="my name" /> {fields.firstName.meta.touched && fields.firstName.meta.error && <span className="error">{fields.firstName.meta.error}</span>} </div> <div className="input-row"> // add value="my last name" <input {...fields.lastName.input} type="text" value="my last name" /> {fields.lastName.meta.touched && fields.lastName.meta.error && <span className="error">{fields.lastName.meta.error}</span>} </div> </div> )De esa forma, las entradas siempre tienen el mismo valor inicial. Cualquier ayuda sobre cómo tener un valor predeterminado y también poder editarlo, gracias.
Cuando proporcione la propuesta de value , también deberá proporcionar la función onChange y manejar el estado: https://reactjs.org/docs/forms.html#control-components
y de documentos redux-form: https://redux-form.com/8.3.0/docs/api/field.md/#-code-onchange-event-newvalue-previousvalue-name-gt-void-code-opcional -
Necesita una variable de estado para contener el valor de entrada.
const [inputValue, setInputValue] = useState(''); En la etiqueta de input , use la variable de estado previamente declarada como value y en onChange of input, establezca el valor de entrada en el valor objetivo.
<input type="text" value={inputValue} onChange={e => setInputValue(e.target.value)} />Puede usar prop defaultValue, como se menciona en la documentación de Redux Form: https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/#props
<Field component={your custom component} defaultValue={}/>