每次按下 TAB 鍵下方都有一個導航專案串列及其焦點導航專案，我需要在按下 ENTER 鍵時觸發焦點導航專案的 onClick 事件。
這就是我所做的
onKeyPress 按預期作業但不觸發 onClick
導航欄組件：
const Navbar = () => {
...
return (
<nav>
<ul style={{ listStyleType: 'none', padding: 0, margin: 0 }}>
{authenticatedRoutes.map((currentItem: any, index: number) => {
const isOpen = openedDrawer === currentItem.path
return (
<ul
key={`ROUTE_LIST_${index}`}
style={{
listStyleType: 'none',
}}
>
<li key={`ROUTE_${index}`}>
<div
onKeyPress={e => {
if (e.key === 'Enter') {
const event = new MouseEvent('click')
e.target.dispatchEvent(event)
}
}}
onClick={() => {
history.push(currentItem.path)
}}
role="link"
tabIndex={0}
>
<div style={{ display: 'flex', alignItems: 'center' }}>
<div
style={{
...LEFT_BORDER,
backgroundColor: isOpen ? 'transparent' : 'initial',
}}
/>
{linkText}
</div>
</div>
</li>
</ul>
)
})}
</ul>
</nav>
)
uj5u.com熱心網友回復：
您無法在反應中輕松地以編程方式觸發組件上的本機事件掛鉤。
最好的解決方案是將代碼也放入您的onKeyPress...
onKeyPress={e => {
if (e.key === 'Enter') {
history.push(currentItem.path) // I Added this line
const event = new MouseEvent('click')
e.target.dispatchEvent(event)
}
}}
onClick={() => {
history.push(currentItem.path)
}}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/404550.html
標籤：