如何处理点击子元素

Posted 2023-05-07

【中文标题】如何处理点击子元素

【英文标题】：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.***.com/a/48576350/6119618（同时添加onClick和onKeyDown）2.***.com/a/54274507/6119618（添加role="button"）3.***.com/a/57380207/6119618（添加tabindex）4.dequeuniversity.com/tips/tabindex-positive-numbers（正tab index）

【参考方案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>