0
274
Views¿Cómo eliminar el foco de un React Native TextInput al hacer clic en el botón?
Tengo una entrada de texto textInput Native y un botón y me gustaría eliminar el foco de la entrada de textInput si tuviera que hacer clic en el botón. ¿Sería eso posible?
Mi TextInput se ve así:
<TextInput onChangeText={onChange} value={searchQuery} placeholder="Start typing to search or add your own" maxLength={80} onFocus={() => { setIsInputFocused(true); }} onBlur={() => { setIsInputFocused(false); setSearchQuery(''); }} blurOnSubmit={true} />Y luego tengo un elemento presionable:
<View onPress={() => { //remove focus from Text Input }></View>
·
Santiago Trujillo
1 answers
Answer question0
El gancho useImperativeHandle es el que necesita aquí, y los ganchos forwardRef , useRef . He creado un nuevo TextInput llamado ControlledTextInput para pasarle una referencia de reacción y exponer el método de desenfoque fuera (nivel de componente de la aplicación). Tenga en cuenta que hay dos referencias, una viene como accesorio (a la que vinculamos las funciones) y la otra dentro de ControlledTextInput (que es la referencia a la entrada de texto real)
import React, { useImperativeHandle, forwardRef, useRef } from "react"; import { StyleSheet, Text, View, TextInput, Button } from "react-native"; const ControlledTextInput = forwardRef((props, ref) => { const internalInputRef = useRef(); useImperativeHandle(ref, () => ({ blur: () => { internalInputRef.current.blur(); } })); return ( <TextInput placeholder={"Type something"} style={styles.textInputStyle} ref={internalInputRef} /> ); }); const App = () => { const inputRef = useRef(null); return ( <View style={styles.app}> <View style={styles.header}> <Text style={styles.title}>Focus lose when button click</Text> </View> <ControlledTextInput ref={inputRef} /> <Button title="Click ME" onPress={() => inputRef.current.blur()} /> </View> ); }; const styles = StyleSheet.create({ app: { marginHorizontal: "auto", maxWidth: 500 }, header: { padding: 20 }, title: { fontWeight: "bold", fontSize: "1.5rem", marginVertical: "1em", textAlign: "center" }, textInputStyle: { border: "2px solid black", maxWidth: 500, height: 50, textAlign: "center", fontSize: 20 } }); export default App;Códigos nativos de Reactandox:
·
Santiago Trujillo
Report
Answer question