Question

当我在此处对子元素执行click事件时，为什么这会产生错误？当我附加onClick={this.handleChangeCity} in the“ city”`类时，也会产生错误

我很想听听你如何解决这个问题。

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

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以获得答案。

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

Answer 2

这些是ESLint文档中提到的以下问题：

Enforce onClick随附以下至少一项： onKeyUp，onKeyDown，onKeyPress。

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

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

如何处理子元素点击

2 个答案: