baxtergu 最近的时间轴更新
baxtergu

baxtergu

V2EX 第 257873 号会员,加入于 2017-10-05 23:35:25 +08:00
baxtergu 最近回复了
117 天前
回复了 sillydaddy 创建的主题 React react 怎样处理父元素的 blur 事件啊??
MDN 上关于 relatedTarget 的解释: https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget

不同事件的 relatedTarget 不太一样
117 天前
回复了 sillydaddy 创建的主题 React react 怎样处理父元素的 blur 事件啊??
CodeSandBox: https://codesandbox.io/s/onblur-bubble-preventiton-ngsdj?file=/src/App.js

核心思路是利用 event.relatedTarget 这个属性来判断失焦是来自内部还是外部。代码如下:

import React, { useRef } from "react";
import "./styles.css";

export default function App() {
const outerRef = useRef();
return (
<div className="App">
<div
onBlur={(e) => {
// 失焦后获取焦点的那个元素
const nextFocusDom = e.relatedTarget;
// 判断其是否在父元素内,如果在父元素内就不错处理
if (nextFocusDom && outerRef.current.contains(nextFocusDom)) {
console.log(" [内部导致] 父元素失焦");
} else {
console.log(" [需要处理] [外部导致] 父元素失焦");
}
}}
className="outer"
ref={outerRef}
tabIndex="0"
>
<input className="inner" />
<select className="inner" />
</div>
<input />
</div>
);
}
117 天前
回复了 ymmagic1234 创建的主题 问与答 json array 如何过滤指定的属性?
let data = [
{
"id": "1234",
"key1": "val1",
"key2": "val2",
"name": "someone",
"age": 39
},
{
"id": "1234",
"key1": "val1",
"key2": "val2",
"name": "someone",
"age": 39
}
]

let result = data.map(item => {
// 过滤出想要保留的 key
const fKeys = Object.keys(item).filter(key => !['name', 'age'].includes(key));
// 不改变原有引用对象数据
let newItem = {};
for (let key of fKeys) {
newItem[key] = item[key];
}
return newItem;
});

指定黑名单就行了,如果是白名单的话用展开操作符可以简化逻辑
你都用 saga 了就还是按照 saga 那套中心化 store 的模式来吧。如果想在组件内使用 hooks,那就在你的页面最外层包一层 conncect 把 dispatch 和 store 传进去(可以爷父子一层一层,也可以创建一个 context 直接隔着传下去),里面的消费组件只要写好 effect 处理好引用变更就好了。
把语言切换的状态做成持久化的,只在加载应用的时候读取一次然后递给应用最外层的 Provider 。
210 天前
回复了 cl903254852 创建的主题 Node.js nodejs 有没有好用的解决粘包问题的库?
固定长度消息头里写消息体的长度,读取的时候不够就缓存下来不处理,等下一个包拼起来完整了再处理
224 天前
回复了 QGabriel 创建的主题 React react hooks 问题
按照你的写法:
1 、useEffect 中的代码只会在组件 mount 以后执行一次,不管以后组件状态或者 props 怎么变 useEffect 中的代码只会执行 1 次。(也就是为什么 1 和 2 只会输出一次,而 0 会输出多次)
2 、useState 生成的 setState 的执行是**创建一个新的 state 为下一次 render 使用**。但是 useEffect 这次函数闭包里的 formData 是上一次的 state 也就是{},这一点跟类组件的 this.state 是完全不一样的。类组件的 this.state 保存的是状态对象的一个引用,但是用 useState 生成的 state 是通过闭包保存了执行 useEffect 时 state 的在函数执行上下文中的,也就是旧的 state 引用。每次重新 render 以后都会生成一个新的 state,而不是改变旧 state 的引用里的值。
301 天前
回复了 luckyrayyy 创建的主题 问与答 有没有很稳的电动升降桌?
升高了都晃
这个网站加密比较厉害,建议用模拟浏览器的方式去爬
305 天前
回复了 chaohuang 创建的主题 程序员 一个关于 gps 坐标匹配算法的求助
geohash 可解
关于   ·   帮助文档   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2361 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 13ms · UTC 14:05 · PVG 22:05 · LAX 07:05 · JFK 10:05
♥ Do have faith in what you're doing.