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

1.自动获取焦点

<TextInput
  style={{
    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(
		<TextInput
 		 ref={inputRef} // 设置引用
 		 style={{
 		   width: 90,
 		   paddingLeft: 20,
 		 }}
 		 onChangeText={text => setText(text)}
 		 value={text}
		/>

		<Button
 		 onPress={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(
		<TextInput
 		 ref={inputRef} // 设置引用
 		 style={{
 		   width: 90,
 		   paddingLeft: 20,
 		 }}
 		 onChangeText={text => setText(text)}
 		 value={text}
		/>
	)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/611021.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

win10无法被远程桌面连接,Win10系统无法被远程桌面连接的原因有哪些

win10无法被远程桌面连接&#xff0c;Win10系统无法被远程桌面连接的原因有哪些&#xff1f; 先&#xff0c;我们需要明确Win10系统无法被远程桌面连接的可能原因。其中&#xff0c;最常见的原因包括&#xff1a;远程桌面功能未启用、网络连接问题、防火墙或安全软件设置不当、…

通俗的理解网关的概念的用途(一)

网关这个概念最早使用于网络&#xff0c;但在当今的智能设备/产品界中&#xff0c;硬生生的被产品人也搞出来一个“网关”的概念&#xff0c;这让早期的咱们这些只知道网络中的网关的人&#xff0c;听得稀里糊涂的。比如智能门锁、安防摄像头等&#xff0c;在产品的使用和介绍中…

node报错——解决Error: error:0308010C:digital envelope routines::unsupported——亲测可用

今天在打包vue2项目时&#xff0c;遇到一个报错&#xff1a; 最关键的代码如下&#xff1a; Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:80:19)百度后发现是node版本的问题。 在昨天我确实操作了一下node&…

C++——命名空间

c ——命名空间 前言一.命名空间命名空间的进一步拓展 二.io流特性 前言 ** 好久不见&#xff0c;甚是想念~今天我们讲解的是关于c命名空间的一些知识点&#xff0c;这只是开胃小菜哦&#xff0c;期待我们后面更深入知识的灵魂碰撞吧 ** 一.命名空间 怎么形容呢~命名空间出现…

网络编程--tcp三次握手四次挥手

1、三次握手 &#xff08;1&#xff09;三次握手的详述 首先Client端发送连接请求报文&#xff0c;Server段接受连接后回复ACK报文&#xff0c;并为这次连接分配资源。Client端接收到ACK报文后也向Server段发生ACK报文&#xff0c;并分配资源&#xff0c;这样TCP连接就建立了。…

数据结构--顺序表和链表的区别

顺序表和链表之间各有优劣&#xff0c;我们不能以偏概全&#xff0c;所以我们在使用时要关注任务的注重点&#xff0c;以此来确定我们要使用两者中的哪一个。 不同点&#xff1a; 存储空间上&#xff1a; 顺序表在物理结构上是一定连续的&#xff0c;而链表(这里以带头双向循环…

DS:顺序表、单链表的相关OJ题训练(2)

欢迎各位来到 Harper.Lee 的学习世界&#xff01; 博主主页传送门&#xff1a;Harper.Lee的博客主页 想要一起进步的uu欢迎来后台找我哦&#xff01; 一、力扣--141. 环形链表 题目描述&#xff1a;给你一个链表的头节点 head &#xff0c;判断链表中是否有环。如果链表中有某个…

Web前端开发 小实训(三) 商品秒杀小练习

学生能够在本次实训中完成商品秒杀页面的基本逻辑 任务要求 能够实现某一个商品的秒杀&#xff0c;在倒计时结束后不再进行秒杀。 操作步骤 1、打开预设好的页面 <html><head><meta charset"utf-8"><title>秒杀</title><link …

vue + element-plus 开发中遇到的问题

1.问题之路由守卫 初写路由守卫&#xff0c;对于next()的理解不是很透彻&#xff0c;就想着都放行&#xff0c;不然看不到效果&#xff0c;结果控制台出现了警告&#xff0c;想着报黄的问题就不是问题&#xff0c;但仔细一看发现他说&#xff0c;如果再生产阶段就会失败&#x…

【问题分析】锁屏界面调起google语音助手后壁纸不可见【Android 14】

1 问题描述 为系统和锁屏分别设置两张不同的壁纸&#xff0c;然后在锁屏界面长按Power调起google语音助手后&#xff0c;有时候会出现壁纸不可见的情况&#xff0c;如以下截图所示&#xff1a; 有的时候又是正常的&#xff0c;但显示的也是系统壁纸&#xff0c;并非是锁屏壁纸…

【用文本生成歌声】Learn2Sing 2.0——歌声转换算法及梅尔频谱详解

一. 频谱图与梅尔谱图的介绍 频谱图&#xff1a;频谱图可以理解为一堆垂直堆叠在一起的快速傅里叶变换结果。 1.1 信号 在进入频谱图模块之前&#xff0c;首先我们需要了解信号是什么。 信号就是某一特定量随时间变化&#xff0c;对于音频来说&#xff0c;这个特定的变化量就…

韩顺平0基础学Java——第8天

p155-168 数组&#xff08;第六章&#xff09; 数组可以存放多个同一类型的数据&#xff0c;数组也是一种数据类型&#xff08;引用类型&#xff09;。 即&#xff0c;数组就是一组数据~ 例&#xff1a;double [] hens {1,2,3,4,5,6}; 新建了一组鸡&#xff0c;里面有6个。…

代码随想录算法训练营第36期DAY18

DAY18 二叉树的层序遍历 102二叉树的层序遍历 “队列先进先出&#xff0c;符合一层一层遍历的逻辑&#xff0c;而用栈先进后出适合模拟深度优先遍历也就是递归的逻辑。” 二叉树层序遍历模版&#xff1a; /** * Definition for a binary tree node. * struct TreeNode { *…

PostgreSQL的学习心得和知识总结(一百四十二)|深入理解PostgreSQL数据库数据库之 Continuous Integration

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…

办公技巧之合集文档 拆分_word

问题 如何将文档合集拆分为单独文档。 操作步骤 软件 word 365 原理简述&#xff1a; 在 word 大纲视图下&#xff0c;通过一级标题确定子文档范围&#xff0c;然后导出即可。 文档结构 从下图可见&#xff0c;文档结构为已建立大纲级别的文档&#xff0c;如果没有建立&a…

每日一题——力扣27. 移除元素(举一反三)

题目链接&#xff1a;https://leetcode.cn/problems/remove-element/description/ 菜鸡写法&#xff1a; // 函数定义&#xff0c;移除数组nums中所有值为val的元素&#xff0c;并返回新的数组长度 int removeElement(int* nums, int numsSize, int val) {// 如果数组长度为…

Steam游戏搬砖,不说破万,月入5K没问题

steam游戏搬砖项目的玩法就是打汇率差&#xff0c;在steam平台购买道具&#xff0c;挂在网易buff上出售&#xff0c;通过汇率差盈利。一天交易几百美金的道具&#xff0c;大概能搞到200块左右的利润&#xff0c;而且平台是支持这样交易的&#xff0c;还很稳定。目前最主流的游戏…

设计模式1——初步认识篇

设计模式1——初步认识篇 一、先让我们浅聊一下面向对象和设计模式。 说起设计模式&#xff0c;我第一次听到它&#xff0c;是在学习面向对象的时候。那么什么是面向对象&#xff0c;什么是设计模式&#xff0c;而且设计模式和面向对象又有什么关系呢&#xff1f; 1、什么是面…

im8mm 网络卡死 Rx packets:1037578 errors:66 dropped:0 overruns:66 frame:0

1&#xff1a;网络接收数据包异常 2&#xff1a;问题复现 问题在进行网络数据包同吞吐量测试的时候出现的。同时发现&#xff0c;在使用iperf2测试时&#xff0c;是不会出现网络中断卡死的情况&#xff0c;使用 iperf3时才会出现此问题 指令(下面的指令运行在PC2上面&#xff…

十二种网络威胁防护方案

一、SQL注入 SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理员不知情的情况下实现非法操作&#xff0c;以此来实现欺骗数据库服务器执行非授权的任…
最新文章