我正在嘗試向onKeyPress我的應用程式添加處理程式以使其符合要求a11y。我有一些互動<div />元素，它在那里提出了一個問題。
我有以下事件處理程式，我想在點擊時觸發。
const handleViewInfoClick = (event: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>): void => {
event.preventDefault();
onProfileClick();
window.open(withConfig(ConfigEnum.PROPERTY_PROFILE_URL, { propertyID: communityId }), '_blank');
};
我將上述處理程式用作：
<div
className={classes.community_name}
onClick={handleViewInfoClick}
onKeyDown={(e) => {
if (e.keyCode === 13) {
handleViewInfoClick(e);
}
}}
tabIndex={0}
role="button"
>
它會導致打字稿錯誤。
如果我宣告event為(event: MouseEvent | KeyboardEvent)，打字稿抱怨handleViewInfoClick(e)引數型別錯誤。如果我宣告KeyboardEvent<HTMLDivElement>，handleViewInfoClick(e)則不會引發錯誤。但是，打字稿抱怨Type 'KeyboardEvent<HTMLDivElement>' is not generic.
處理這個問題的正確方法是什么？
uj5u.com熱心網友回復：
使用 React 處理程式，您應該使用來自 React 的事件型別，而不是來自 DOM：
const handleViewInfoClick = (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>): void => {
你也可以使用
const handleViewInfoClick = (event: React.SyntheticEvent) => {
因為KeyboardEvent 和MouseEvent 都是從SyntheticEvent 繼承的，你所關心的只是能夠呼叫preventDefault它，SyntheticEvent 有。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/399360.html
標籤：javascript 反应 打字稿