Entonces, el problema es cuando el valor de entrada se completa automáticamente y cuando hago clic en el botón Enviar, el valor del campo de entrada no se reconoce a menos que cambie algo allí, por ejemplo, elimine y agregue nuevamente la última palabra al nombre. ¿Cómo puedo hacer que el valor sea reconocido inmediatamente?
// This is 'context' from where we get info about 'user' like first name, last // name, email etc const { user } = useContext(UserContext); const [firstName, changeFirstName] = useState(user.firstName); const [lastName, changeLastName] = useState(user.lastName); /** * @param {Object} e */ const handleChange = (e) => { handleUserInputChange(e); changeFirstName(e.firstName); changeLastName(e.lastName); } <input type="text" value={firstName} name="firstName" onChange={(e) => handleChange(e)} />Hay algo sospechoso con su controlador onChange :
const handleChange = (e) => { handleUserInputChange(e); changeFirstName(e.firstName); changeLastName(e.lastName); } En este punto, no tiene acceso a los valores e.firstName y e.lastName . El objeto e es solo el evento de la llamada onChange (encuentre un ejemplo en los documentos de React aquí ).
Para el primer nombre, podría usar algo como esto:
const handleChange = (e) => { changeFirstName(e.target.value); }Recomendaría refactorizar un poco para que sea más comprensible. De todos modos, está buscando (input)="" para cambiar el valor a medida que el usuario escribe. No puedes tener una propiedad como const (constante) si juegas a sobrescribirla.
html
<input #firstName type="text" (value)="firstName" name="firstName" (input)="onFirstNameChange(firstName.value)"/> <input #lastName type="text" (value)="lastName" name="lastName" (input)="onLastNameChange(lastName.value)"/>t
firstName: string; lastName: string; onFirstNameChange(event: any) { this.firstName = event; } onLastNameChange(event: any) { this.firstName = event; }