当子级的 onClick 被触发时，触发向父级注册的 onKeyUp 事件

Question

我有一个名为 onKeyUp 的函数定义如下，它监听转义和输入键

const onKeyUp = (targetKey: string, event: React.KeyboardEvent<HTMLDivElement>) => {
    const key = event.keyCode;
    const editString = event.currentTarget.textContent;
    switch (key) {
        case 27: // escape key
        case 13: // enter key
            if (editString.trim().length === 0) {
                MOpenSnackBar({
                    message: {
                        key: new Date().getTime(),
                        message: "Target segment cannot be empty"
                    },
                    open: true
                });
            } else {
                if (editString.trim() !== currentVal.trim()) {
                    props.onChangeCallback(targetKey, editString);
                }
                removeEditMode(targetKey);
            }
            break;
    }
};


const done = (targetKey: string, event: React.MouseEvent<HTMLSpanElement, MouseEvent>) {
   // call onKeyUp here
}

它在 div 上定义，看起来像：

<div onKeyUp={onKeyUp.bind(null, props.targetStringId)}>

       .. some tags here
       <Tag onClick={done.bind(null, props.targetStringId)}>Done</Tag>
       .. some more tags here
</div>

我想在有人点击 Tag 时触发相同的事件 onKeyUp，因为 onKeyUp 为 div。

我该怎么做？

Answer 1

尝试将 event.stopPropagation() 添加到您的 onKeyUp() 函数中 :D

当子级的 onClick 被触发时，触发向父级注册的 onKeyUp 事件

Firing onKeyUp event registered with parent when child's onClick is fired

javascript

events

keyboard-events

typescript

reactjs