Tengo una lista de preguntas de la encuesta como componentes para que un usuario las complete y estoy tratando de revisar cada una y actualizar el estado de los componentes principales cuando se completa el campo de entrada de los componentes secundarios, sin embargo, en el primer componente sigo recibiendo el texto. de TextInput como indefinido.
Este es mi componente principal 'SurveyScreen':
export default function SurveyScreen({navigation, route}) { const [childNameValue, setChildNameValue] = useState(''); function handleChange(newValue) { setChildNameValue(newValue); console.log(childNameValue); } return ( <ScrollView style={styles.cardContainer}> <View> <Text style={styles.title}>Please fill out all questions below</Text> </View> <View> <BasicTextInput title="Child's full name" value={childNameValue} onChange={handleChange} /> ); }Y mi componente secundario 'BasicTextInput':
import React, {useState} from 'react'; import { View, Text, StyleSheet, Pressable, Platform, TextInput, } from 'react-native'; import CheckBox from '@react-native-community/checkbox'; export default function BasicTextInput({title, onChange}, props) { const [text, onChangeText] = useState(''); function handleChange(e) { onChange(e.target.value); } return ( <View> <View> <Text>title</Text> </View> <View> <TextInput style={styles.input} onChange={handleChange} value={props.childNameValue} /> <View /> </View> </View> ); }Eliminé algunos estilos e importaciones para mantenerlo simple, al ingresar texto en BasicTextInput, el registro de la consola que obtengo en mi padre es 'Indefinido'
Me imagino que me estoy perdiendo algo simple, ¡pero cualquier ayuda sería muy apreciada! Tengo varios de estos para hacerlo, así que quiero que este componente inicial sea correcto.
Gracias por adelantado.
El problema está en la línea de abajo.
export default function BasicTextInput({title, onChange}, props) {Aquí BasicTextInput es un componente y recibe un solo argumento como accesorios, por lo que si desea reestructurarlo, será
export default function BasicTextInput({title, onChange}) {Pude lograr esto al final al pasar onChangeValue como accesorio que toma el valor nuevo y establece el estado en ese valor nuevo.
Aquí están ambos archivos actualizados como ejemplo:
export default function SurveyScreen({navigation, route}) { const [childNameValue, setChildNameValue] = useState(''); return ( <ScrollView style={styles.cardContainer}> <View> <Text style={styles.title}>Please fill out all questions below</Text> </View> <View> <BasicTextInput title="Child's full name" value={childNameValue} onChangeValue={newValue => setChildNameValue(newValue)} /> ); }Y mi archivo de componente Child:
export default function BasicTextInput({title, onChangeValue}) { return ( <View style={styles.container}> <View style={styles.containerHeader}> <Text style={styles.questionTitle}>{title}</Text> </View> <View style={styles.answerContainer}> <TextInput style={styles.input} onChangeText={onChangeValue} /> <View /> </View> </View> ); }¡Espero que esto ayude a algunos de ustedes en el futuro!