Estoy tratando de poner valores de diferentes TextInput en 1 objeto. Soy nuevo en React en general y aún no tengo una comprensión firme de los estados. Hasta ahora mi código es así:
function App() { const [enteredText, setEnteredText] = useState() const [firstText, setFirstText] = useState() const [secondText, setSecondText] = useState() function textChange(enteredText) { console.log(enteredText) //I want firstText and secondText here } return ( <View style={styles.container}> <Text style={styles.header}>Great one!</Text> <TextInput value={firstText} onChangeText={text=>setEnteredText(text)} style={styles.input} placeholder='1st text' /> <TextInput value={secondText} onChangeText={text=>setEnteredText(text)} style={styles.input} placeholder='2nd text' /> <Button onPress={()=>textChange(enteredText)} title='Submit' color='orange' /> </View> ); } export default App;Podrías escuchar firstText y secondText con useEffect y ponerlos dentro enteredText cada vez que cambien, así:
function App() { const [enteredText, setEnteredText] = useState(); const [firstText, setFirstText] = useState(); const [secondText, setSecondText] = useState(); function textChange(enteredText) { console.log(enteredText); // will gives you {firstText : "whatever", secondText: "firstText"} } useEffect(() => { setEnteredText({ firstText, secondText, }); }, [firstText, secondText]); return ( <View style={styles.container}> <Text style={styles.header}>Great one!</Text> <TextInput value={firstText} onChangeText={(text) => setFirstText(text)} style={styles.input} placeholder="1st text" /> <TextInput value={secondText} onChangeText={(text) => setSecondText(text)} style={styles.input} placeholder="2nd text" /> <Button onPress={() => textChange(enteredText)} title="Submit" color="orange" /> </View> ); }¡Estás muy cerca! Lo que desea (texto ingresado) en realidad no debería ser un estado. Fluye lógicamente del primer y segundo texto, por lo que puede hacer que sea una constante.
Como esto:
function App() { // changed the default state to be an empty string instead of // the default undefined value. But either would work. const [firstText, setFirstText] = useState("") const [secondText, setSecondText] = useState("") const enteredText = firstText + secondText // I'd probably rename this function to "handleSubmit" function textChange() { console.log(enteredText) } return ( <View style={styles.container}> <Text style={styles.header}>Great one!</Text> <TextInput value={firstText} onChangeText={text=>setFirstText(text)} style={styles.input} placeholder='1st text' /> <TextInput value={secondText} onChangeText={text=>setSecondText(text)} style={styles.input} placeholder='2nd text' /> <Button onPress={textChange} title='Submit' color='orange' /> </View> ); } export default App; Tenga en cuenta cómo cambié las devoluciones de llamada onChangeText para TextInput s
Entonces establece firstText y secondText en sus respectivos onClick s. Cada vez que se actualiza el estado, el componente vuelve a representar y ejecuta todo el código en el cuerpo de la función. la constante enteredText se creará en cada ejecución y siempre será la concatenación más reciente de los dos estados.
¡Espero que esto ayude!