11｜事件处理：如何创建自定义事件？

”那么我们就需要在 useEffect 里去做 window.addEventListner，然后在返回的回调函数里去 window.removeEventListner，实现起来就很麻烦“ 这里有两处笔误 addEventListner -> addEventListener removeEventListner -> removeEventListener

追番～

因为点击了两个按钮会触发两个事件，所以我的想法是：使用数组的方式存储key值,keyup的时候清空数组就行了： const useKeyPress = (domNode = document.body) => { const [keys, setKeys] = useState([]) useEffect(() => { const handleKeyPress = evt => { setKeys(prevKeys => { if (prevKeys.length !== 2) { return [...prevKeys, evt.keyCode] } else { return prevKeys } }) } domNode.addEventListener('keypress', handleKeyPress) return () => { domNode.removeEventListener('keypress', handleKeyPress) } }, [domNode]) return keys }

基本思路： 1. 使用数组存值；2. keydown存值； 3. 当keyup表示单键或者组合键按键结束，清空数组；4.当长按键不放会多次触发事件，所以setKey时需要去重 export default function useKeyPress (dom = document.body) { const [key, setKey] = useState([]) const isNext = useRef(true) // 当keyup之后，isNext置为true表示又是新一轮的按键监听 useEffect(() => { const handleKeyPress = (e) => { if (e.type === 'keydown') { if (isNext.current) setKey([]) setKey(keys => [...new Set([...keys, e.key])]) // 去重 isNext.current = false } else { isNext.current = true } } dom.addEventListener('keydown', handleKeyPress) dom.addEventListener('keyup', handleKeyPress) return () => { dom.removeEventListener('keydown', handleKeyPress) dom.removeEventListener('keydown', handleKeyPress) } }, [dom]) return key.join(',') }

我们可以分别建立2个按下的hooks，以及2个弹起的hooks, 作为数据源，用一个useMemo来监控这2个键同时按下的状态

老师，这样拿到的keyCode其实是上一次的吧（也就是上一个按下的键盘）这样监听没什么意义啊

老师我有两个问题，麻烦帮忙解答下： 1、上面绑定的键盘事件，hook里面具体什么时候回注销这个事件呢，代码是在useEffect return里面注销事件的，那具体什么时候会走到这代码里面呢？ 2、看到这节课内容我想起来之前封装组件遇到的一个问题，场景是这样，需要封装一个公共组件，对于原生dom事件需要都能接受，其他的无用的props不想接受，react有什么方法可以判断当前的事件是不是原生dom支持的吗？还是说我需要具体的一一罗列？

const useKeyPress = (domNode = document.body) => { const [key, setKey] = useState([]); useEffect(() => { const handleKeyPress = (evt) => { if (key.length === 2) { const tmpKey = [...key]; tmpKey.shift(); tmpKey.push(evt.key); setKey(tmpKey); } else { setKey((prev) => { return [...prev, evt.key]; }); } }; domNode.addEventListener("keypress", handleKeyPress); return () => { domNode.removeEventListener("keypress", handleKeyPress); }; }, [domNode, key]); return key; };

React 应该也可以在捕获阶段监听事件。例如 `onClickCapture`。

const useKeyPress = (domNode = document.body ) => { const [key1, setKey1] = useState(null); const [key2, setKey2] = useState(null); const [flag, setFlag] = useState(0); useEffect(() => { const handleKeyPress = (evt) => { // 设置两种状态， 0 是key1，1是key2 if(flag === 0){ setKey1(evt.keyCode); setKey2(null); setFlag(1); }else if (flag === 1){ setKey2(evt.keyCode); setFlag(0); } }; // 监听按键事件 domNode.addEventListener('keypress', handleKeyPress); return () => { domNode.removeEventListener('keypress', handleKeyPress); } },[domNode, flag]); return { key1, key2 }; }