Tengo un TextInput y no quiero que se reproduzca cada vez que cambio el valor dentro de él.
const [WrittenVal,setWrittenVal] = useState(()=>''); ... <TextInput value={String(WrittenVal)} onChangeText={text => setWrittenVal(text)} /> pero quiero poder cambiar el valor dentro de la entrada con solo presionar un botón, por eso no acabo de usar defaultValue
alguna solución??
Puede usar useRef para guardar el texto de la entrada de texto sin renderizar, y useState para mostrar el texto en la entrada al presionar el botón:
Ejemplo en vivo: https://snack.expo.dev/TW-fMx1-2
import React from "react"; import { SafeAreaView, StyleSheet, TextInput,TouchableOpacity,Text } from "react-native"; const UselessTextInput = () => { const [text, onChangeText] = React.useState(""); const textRef = React.useRef('') const textToRef = (text) =>{ textRef.current = textRef.current + text } const showTextInInput = () =>{ onChangeText( textRef.current ) } console.log("render") return ( <SafeAreaView> <TextInput style={styles.input} onChangeText={textToRef} value={text} /> <TouchableOpacity onPress={showTextInInput}> <Text>SHOW TEXT IN INPUT</Text> </TouchableOpacity> </SafeAreaView> ); }; const styles = StyleSheet.create({ input: { height: 40, margin: 12, borderWidth: 1, marginTop:50, padding: 10, }, }); export default UselessTextInput;No puede evitar que se vuelvan a renderizar en el tipo. Pero su código se puede simplificar a:
const [value, setValue] = useState(''); <TextInput value={value} onChangeText={setValue} />No puede evitar volver a renderizar en la entrada cuando cambia el valor.
Pero puede evitar que React.memo o useMemo hook vuelvan a renderizar otros componentes.
Y para cambiar el valor de la entrada presionando un botón, puede hacer lo siguiente:
<Button onPress={() => { setWrittenVal(""); //write value you want in "" }}