如何添加键盘侦听器到我的 onClick 处理程序？

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

It seems this rule is to enforce Accessibility standards.

Based on this, change your code to do something like this

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

You could also disable the rule in eslint, I suppose it depends on preference.

from ESLINT documents:

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

in this case you can either disable the rule or update your code. its better to update your code to meet the web standards.

 class MyTextArea extends React.Component {


handleClick = () => {
this.focus();
}
handleKeyDown = (ev) => {
// check keys if you want
if (ev.keyCode == 13) {
this.focus()
}
}
focus = () => this.ref.focus;


handleRef = (component) => {
this.ref = component;
};


render() {
return (
<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
<textarea></textarea>
</div>
);
}
}

You can pass the ESLint warning/error by adding at least one keyboard listener, as answered by Kaysser. But I'd rather fix the real problem here, which is having click and keyboard listeners on an element that's not recognised as clickable by browsers and screen readers.

The error message ("Visible, non-interactive elements with click handlers must have at least one keyboard listener") describes a lot when you think about it; you've added a click handler to an element that's made to display information and not for the user to interact with. On top of adding a keyboard listener you should also change the cursor to a pointer on hover, add tabindex, role etc. to make it accessible and comprehensible.

The best fix for this is to change the div element to a button, that solves the ESLint warning but also tells all browsers and screen readers that this is an interactive element that you can click with all kinds of pointers (mouse, keyboard, finger, stylus).

class MyTextArea extends React.Component {
render() {
return (
<button className="magicHelper" onClick={this.handleClick}>
<textarea></textarea>
</button>
);
}
}

Did you make it to a div, span or any other element than a button because you didn't want the style of a button? It's better to remove that button-like styling and only make it look more like a div:

// CSS
.magicHelper {
display: block;
width: 100%;
padding: 0;
background-color: transparent;
border: none;
font: inherit;
text-align: inherit;
}

I got this kind of problem when committing the git message. I'm having following code at that time.

<span onClick={myHome}  className="home__home-header__mybb__mybb-links__ML1" >

to avoid it I used following attribute in the element.

aria-hidden="true"

you can use onMouseDown instead of onClick

For people who are unable or don't want to use a mouse, an onclick handler may not suffice. So ESLint tags this as an accessbility issue until you add an onKeyDown handler as well.

For those getting this error with the <img /> tag, you can replace it with the <input type="image" /> tag. So, change from:

<img alt="" src={} onClick={} />

to:

<input type="image" alt="" src={} onClick={} />

Indicate the element's role with the role, onKeyPress and tabIndex attributes:

<div
onClick={onClickHandler}
onKeyPress={onKeyPressHandler}
role="button"
tabIndex="0">
Save
</div>