
Yzzzed
React Native实现模仿web端通过id获取input DOM
你所描述的是React Native环境中管理焦点(focus)问题的一个解决方案。在React Native中,由于没有像Web中的DOM API那样的直接方式来获取和操作DOM元素,因此需要采取一些不同的策略来实现这样的需求。在你的实现中,使用了React的上下文(Context)和引用(Refs)来模拟类似的功能。这是一个很好的解决方案,因为它允许你在组件树中的任何位置管理焦点,同时还能处理嵌套组件中的焦点问题。以下是关于你的解决方案的一些简要解释: 1. **InputRefsContext**: 创建了一个上下文来存储所有注册的输入元素的引用。这使得你可以在任何子组件中访问这个上下文并获取或设置焦点。 2. **CIdInput组件**: 这个组件使用`forwardRef`来接受一个引用,并在内部将其与ID一起注册到上下文中。此外,它还提供了`focus`方法,可以在外部被调用以设置焦点。 3. **InputRefsContextProvider**: 这是一个组件,它提供了一个上下文提供者(Provider),在其中可以注册新的输入元素并聚焦特定的输入元素。通过使用React的`useRef`和`useMemoizedFn` hooks,可以存储和调用相关的函数来管理焦点。 4. **DeepNestedInputs和ParentComponent**: 在这两个组件中,使用了`CIdInput`组件并使用了按钮来触发焦点的设置。通过按钮的`onPress`事件,可以调用通过上下文提供的`focusInput`函数来设置焦点。 这种方法适用于React Native环境,因为它充分利用了React的特性,如上下文和引用,而没有依赖于Web特有的DOM API。通过这种方式,你可以有效地管理跨多层嵌套的组件的焦点问题。
vite项目初始化实践
vite项目初始化 使用官方vite模板初始化 pnpm create vite my-app --template react-swc-ts 配置.vscode { "prettier.enable": false, "editor.formatOnSave": false, "ed
Antd-FormList嵌套Table实践
需求说明使用Antd,实现一个Table,有两种状态,纯展示状态和可编辑状态。纯展示状态下所有内容直接取值,不可变。可编辑状态下table某些列为Input输入框,并且input中的值改变时,需要实时收集改变后的状态。Table行支持勾选,并且在可编辑状态下,点击提交表单时,只校验已勾选行的值。实现

[常用算法整理]javascript algorithm
排序算法: 冒泡排序,插入排序,选择排序,快速排序,归并排序,桶排序,堆排序。其他常用算法:洗牌算法,最小公约数,最大公因数,获取所有匹配字符串的下标。
![[常用算法整理]javascript algorithm](https://image.hyzed.cn/blog/484bcf1ca4d77859e911dc5c6e3a78c7.jpg)
[学习笔记整理] 浏览器缓存策略
浏览器缓存策略两类缓存强缓存(本地缓存)协商缓存(弱缓存)浏览器缓存分为两个阶段,本地缓存阶段与协商缓存阶段,也就是以上两个顺序为先判断强缓存再判断协商缓存。
![[学习笔记整理] 浏览器缓存策略](https://image.hyzed.cn/blog/dc438af7e1c489186d0d5f68ad8e5811.jpg)
[20210422] js截取字符串 - slice(), substring(), substr() 区别
2021.4.22 js截取字符串 slice() string.slice(start, end) 参数描述 start必需。要截取的字符串的起始下标。如果是负数,则数值为string.length + start。例如,-1指的是最后一个字符,-3指的是倒数第三个字符。
![[20210422] js截取字符串 - slice(), substring(), substr() 区别](https://image.hyzed.cn/blog/e351f31c1206b637d789b3b1441de6fd.jpg)
观察者模式 -- 鼠标拖拽div
观察者模式:定义了对象间一种一对多的依赖关系,当目标对象 Subject 的状态发生改变时,所有依赖它的对象 Observer 都会得到通知。以观察者模式的形式去实现鼠标拖拽div。注:此处的实现是一对一的依赖关系。代码实现基本html<!DOCTYPE html><html>

js数据结构与算法 -- 快速排序(quickSort) 简单算法与高级算法
快速排序 (quickSort) 快速排序是对冒泡排序的一种改进, 第一趟排序先分成两份, 然后递归调用,继续二分。 快排属于分治法的一种,先把大问题分成各个小问题,再把小问题分成更小的问题。 简单算法实现 const quickSort = (arr) => { const len =

Leetcode - 70 爬楼梯 js解法
Leetcode - 70 爬楼梯 js解法 题目 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢? 注意: 给定 n 是一个正整数。 示例一 输入: 2 输出: 2 解释: 有两种方法可以爬到楼顶。 1. 1 阶 + 1 阶
