Reactjs 如何处理单击子元素

当我在这里对子元素执行单击事件时，为什么会产生错误？当我在“cities”`类中附加

onClick={this.handleChangeCity}时，它也产生了一个错误

我很想听听你是怎么处理这件事的

Eslint错误：[Eslint]具有单击处理程序的可见、非交互元素必须至少有一个键盘侦听器。（jsx-a11y/点击事件具有关键事件）
[eslint]带有事件处理程序的静态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;

  }

从“React”导入React；
从“react dom”导入react dom；
从“/navigation.json”导入jsonData；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
加载：对，
城市：jsonData.cities，
currentCity:jsonData.cities[0]。标签，
};
this.handleChangeCity=this.handleChangeCity.bind（this）；
}
创建城市（）{
//让cityList=[]；
让孩子们=[]；
让cityClass='oneCity'；
让activeCityClass=`${cityClass}处于活动状态`；
this.state.cities.forEach（（城市，索引）=>{
设divClass=index？cityClass:activeCityClass；
children.push（添加时出错
className={divClass}
数据城市={city.label}
key={index}>{city.label}）
});
返回儿童；
}

我不知道为什么会这样

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

handleChangeCity=（事件）=>{
event.preventDefault（）；
console.log（event.currentTarget）；
这是我的国家({
currentCity:event.currentTarget.key
});
}
render（）{
返回(
{this.createCities（）}
);
}
}
render（，document.getElementById（“根”））；
看起来您有两个线头错误。第一个是
可见的，带有单击处理程序的非交互元素必须至少有一个键盘侦听器。
。这看起来是关于可访问性的，所以人们可以使用键盘和鼠标进行交互。因此，您也必须添加一个密钥处理程序，请检查

第二个问题是带有事件处理程序的静态HTML元素需要角色。

。这是一个linting选项，用于防止将事件处理程序绑定到像

这样的通用对象。请查看该问题的答案

---

或者，您可以更改或禁用您的绒线，使这些不再是问题。

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

Enforce onClick至少附带以下一项： onKeyUp、onKeyDown、onKeyPress

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

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

{city.label}

包括您得到的具体错误及其发生的行。@Jayce444刚刚添加给那些在尝试创建交互式div as按钮时遇到此问题的人。1.（添加onClick和onKeyDown）2。（addrole=“button”）3。（添加tabindex）4。（正选项卡索引）实际上我添加了这两个，但仍然有一个错误…是的，我还使用了

div

，这可能是问题所在，但没关系