如何处理点击子元素

Question

当我在这里的一个子元素上做一个单击事件时，为什么这会产生错误？当我附加onClick={this.handleChangeCity} in the"cities"`类时，它也产生了一个错误

我很想听听你是怎么解决这个问题的。

Eslint错误:带有单击处理程序的eslint可见非交互元素必须至少有一个键盘侦听器。(jsx-a11y/click-events-have key-events)将静态HTML元素与事件处理程序关联起来需要一个角色。(JSX -a11y/无静态元素交互)(JSX属性) onClick: any

import React from "react";
import ReactDOM from "react-dom";
import jsonData from "./navigation.json";

class App extends React.Component {
    constructor(props) {
super(props);

this.state = {
  loading: true,
  cities : jsonData.cities,
  currentCity: jsonData.cities[0].label,
};

this.handleChangeCity = this.handleChangeCity.bind(this);
  }

  createCities(){
    //let cityList = [];
    let children = [];
    let cityClass = 'oneCity';
    let activeCityClass = `${cityClass} active`;
    this.state.cities.forEach((city, index) =>{ 
      let divClass = index ? cityClass : activeCityClass;
      children.push(<div 
        onClick={this.handleChangeCity} ===> error when this is added
        className={divClass} 
        data-city={city.label}
        key={index}>{city.label}</div>)
    });

    return children;

  }

我不知道为什么会发生这样的事情。

  handleChangeCity = (event) => {
    event.preventDefault();
    console.log(event.currentTarget);
    this.setState({
      currentCity: event.currentTarget.key
    });
  }



  render() {
    return (

      <section className="container">
        <div className="navigation">
          <div className = "cities clearfix">
               {this.createCities()}

          </div>

          <div className="underline"></div>
        </div>
      </section>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

Answer 1

好的，看起来你得到了2个皮棉错误。首先是Visible, non-interactive elements with click handlers must have at least one keyboard listener.。这看起来是关于可访问性的，所以人们可以使用键盘和鼠标进行交互。因此，您还必须添加一个键处理程序，请查看this similar post。

第二个问题是Static HTML elements with event handlers require a role.。这是一个内联选项，可防止将事件处理程序绑定到泛型对象，如<div/>。请查看this post以找到答案。

或者，您可以更改或禁用您的linting，以便这些不再是问题。

Answer 2

这些是ESLint文档中提到的ESLint问题，如下所示：

Enforce onClick至少伴随以下一项: onKeyUp、onKeyDown、onKeyPress。

要解决这个问题，您可以使用上面提到的任何一个属性，并将您的代码更改为：

<div 
   onClick={this.handleChangeCity}
   onKeyDown={this.handleChangeCity}
   className={divClass} 
   data-city={city.label}
   key={index}>{city.label}
</div>