RN使用js让输入框取消和获取焦点(及键盘的监听)

本文主要是介绍RN使用js让输入框取消和获取焦点(及键盘的监听)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.自动获取焦点

<TextInputstyle={{width: 90,paddingLeft: 20,}}autoFocus={true} // 自动获取焦点onChangeText={text => setText(text)}value={text}
/>

2.取消焦点

import React, { useRef } from 'react';
import {TextInput,Button} from 'react-native';
export default function App(){const inputRef = useRef(null);const [text,setText]=useState('')const btnClick = ()=>{inputRef.current.blur(); // 取消焦点}return(<TextInputref={inputRef} // 设置引用style={{width: 90,paddingLeft: 20,}}onChangeText={text => setText(text)}value={text}/><ButtononPress={btnClick}>)
}

3.监听键盘收起移除焦点

import React, { useRef } from 'react';
import {TextInput, Button, Keyboard} from 'react-native';
export default function App(){const inputRef = useRef(null);const [text,setText]=useState('')useEffect(() => {const keyboardDidHideListener = Keyboard.addListener('keyboardDidHide',() => {// 在这里执行键盘收起时的操作console.log('键盘已隐藏');// 例如，取消焦点inputRef.current.blur();});// 注意：在组件卸载时记得移除监听器，以避免内存泄漏return () => {keyboardDidHideListener.remove();};}, []);return(<TextInputref={inputRef} // 设置引用style={{width: 90,paddingLeft: 20,}}onChangeText={text => setText(text)}value={text}/>)
}

这篇关于RN使用js让输入框取消和获取焦点(及键盘的监听)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---