primera publicación aquí. Intenté buscar en el foro pero ninguna de las respuestas parece funcionar en mi caso. Soy bastante nuevo en React y tengo un problema con mi controlador onChange.
En mi componente principal tengo lo siguiente:
// User registration - Onchange handler const handleChange = (value, event) => { // console.log(event.target.value); setFormValue({ ...formValue, [event.target.name]: value, }); };Y básicamente, el componente principal genera un formulario de registro de varios pasos, que representa los diferentes componentes en función de un estado, aquí está el condicional para el nombre de usuario:
{step === 1 ? <Username handleChange={handleChange} formValue={formValue} /> : null}En el niño tengo el siguiente componente de entrada:
export const Username = ({formValue, handleChange}) => { const username = formValue; return ( <View> <Input placeholder="Username..." onChangeText={handleChange} value={formValue.username} name={username} /> </View> ) }Y el componente de entrada:
const Input = (props, name) => { return ( <Animated.View style={[styles.inputSection, inputAnimated]}> <TextInput style={styles.input} placeholder={props.placeholder} placeholderTextColor={theme.colors.lightP} fontSize={16} {...props}/> </Animated.View> ) }No estoy seguro de por qué me sale el error:
No se pueden leer las propiedades de undefined (leyendo 'objetivo)
Agradecería cualquier ayuda. Console.log de event.target devuelve indefinido.
Esto sucede porque onChangeText pasa el valor de la entrada automáticamente a la función que se le ha asignado, sin pasar el evento en sí.
Si desea usar el evento => use onChange en lugar de onChangeText
Aquí en la documentación que puede leer para el evento onChange
Estás usando onChangeText
Entonces, onChangeText solo tiene valor de texto, pero si desea tener el evento nativo, debe usar onChange.
Luego acceda a él en su método
const handleChange = ({ nativeEvent: { eventCount, target, text} }) => { // console.log(event.target.value); setFormValue({ ...formValue, [target]: text, }); };EDITADO
Dado que volvió a preguntar cómo acceder al nombre de la entrada de texto. Aquí este enlace muestra cómo manejar la entrada de texto
export const Username = ({formValue, handleChange}) => { const username = formValue; return ( <View> <Input placeholder="Username..." onChangeText={(value)=>handleChange(value,username)} {/* here username is the name you are passing to the value */} value={formValue.username} name={username} /> </View> ) } // then in your handle method const handleChange = (value,name) => { setFormValue({ ...formValue, name: value, }); };