[英]Material-ui component onKeyUp event is not triggering
I have a material-ui component Grid and I have a onKeyUp event on that But somehow onKeyUp
is not triggering我有一个 material-ui 组件网格,我有一个 onKeyUp 事件但是不知何故
onKeyUp
没有触发
<Grid item xs={12} onKeyUp={handleClickOnKeyUp} sx={{cursor: "pointer"}} onClick=
{handleClickGrid}>
</Grid>
and the functions are功能是
const handleClickOnKeyUp = () => {
console.log("123123123");
}
const handleClickGrid = () => {
console.log("456456456");
}
Other code for Grid and Grid items under Grid container is working fine, There is no problem in that The onClick
event is also working but onKeyUp
is not working What is the issue? Grid 容器下的 Grid 和 Grid items 的其他代码工作正常,没有问题
onClick
事件也工作但onKeyUp
不工作问题是什么?
You need to add a tabIndex
to the component (element) to allow it to accept focus.您需要向组件(元素)添加一个
tabIndex
以允许它接受焦点。 For example:例如:
<Grid
item
xs={12}
onKeyUp={handleClickOnKeyUp}
sx={{ cursor: "pointer" }}
onClick={handleClickGrid}
tabIndex={0} {/* tabIndex added here */}
>
...
</Grid>
Updated answer to additional comment:对附加评论的更新答案:
If you'd also like to remove the focus outline, you can add the styling:如果您还想删除焦点轮廓,可以添加样式:
<Grid
item
xs={12}
onKeyUp={handleClickOnKeyUp}
sx={{ cursor: "pointer", "&:focus": { outline: "none" } }} {/* removes focus outline */}
onClick={handleClickGrid}
tabIndex={0}
>
Working CodeSandbox: https://codesandbox.io/s/pensive-leaf-x4e6xv?file=/demo.js工作代码沙盒: https://codesandbox.io/s/pensive-leaf-x4e6xv?file=/demo.js
Note: If you are concerned about accessibility, I'd be careful setting that tabIndex
property to anything other than zero ( 0
).注意:如果您担心可访问性,我会小心地将
tabIndex
属性设置为零 ( 0
) 以外的任何值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.