如何处理点击子元素答案

【问题标题】：How to handle click on child element如何处理点击子元素
【发布时间】：2019-07-03 19:13:37
【问题描述】：

为什么我在这里对子元素执行点击事件时会产生错误？当我附加onClick={this.handleChangeCity} in the"cities"` 类时也产生了错误

我很想听听您是如何解决这个问题的。

Eslint 错误：[eslint] 具有点击处理程序的可见、非交互式元素必须至少有一个键盘侦听器。 (jsx-a11y/click-events-have-key-events) [eslint] 带有事件处理程序的静态 HTML 元素需要一个角色。 (jsx-a11y/no-static-element-interactions) (JSX 属性) onClick: 任意

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"));

【问题讨论】：

包括你得到的具体错误和它发生的行。
@Jayce444 刚刚添加
对于那些在尝试将交互式 div 设为按钮时遇到此问题的人。 1.stackoverflow.com/a/48576350/6119618（同时添加onClick和onKeyDown）2.stackoverflow.com/a/54274507/6119618（添加role="button"）3.stackoverflow.com/a/57380207/6119618（添加tabindex）4.dequeuniversity.com/tips/tabindex-positive-numbers（正tab index）

标签： reactjs

【解决方案1】：

看起来你有 2 个 linting 错误。首先是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.。这是一个 linting 选项，可防止将事件处理程序绑定到像 <div/> 这样的通用事物。查看this post 以获得答案。

或者，您可以更改或禁用 linting，这样这些就不再是问题了。

【讨论】：

其实我都加了，但是还是有错误……是的，我也用了div，这可能是问题所在，但没关系

【解决方案2】：

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

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

要解决此问题，您可以使用上述任何道具并将您的代码更改为：

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

【讨论】：