为什么我不能使用 React 将 onClick 与图标一起使用？

Question

我正在使用 React JS，我想使用一个图标来基本上使它看起来像一个下拉菜单。此问题附带的屏幕截图。我可以使用按钮调用 onClick 函数，但相同的代码不适用于 i 标签。我正在关注的教程可能已经过时。但我想知道替代方案。这是我的 class 组件。

import React, { Component } from 'react';

import PropTypes from 'prop-types';
class Contact extends Component {
    state = {}
    onShowClick = (name, e) => {
        console.log(name);
    };
    render() {
        const { name, email, phone } = this.props;
        return (
            <div className='card card-body mb-3'>
                <h4>{name}{' '} <i onClick={this.onShowClick.bind(this, name)} className='fas fa-sort-down' /></h4>
                <button onClick={this.onShowClick.bind(this, name)}>Button</button>
                <ul className='list-group'>
                    <li className='list-group-item'>E-mail: {email}</li>
                    <li className='list-group-item'>Phone: {phone}</li>
                </ul>
            </div>
        );
    }
}
// PropTypes - TypeChecking
Contact.propTypes = {
    name: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    phone: PropTypes.string.isRequired
}
export default Contact;

我的问题是 h4 标签内的标签。函数 onShowClick 与按钮配合使用非常好，但与图标配合使用时效果不佳。我已经使用了 .bind 等等，但我没有看到任何结果。我如何让它工作？

感谢您的帮助。

Answer 1

您的代码应该可以工作，但您必须意识到 i 元素不是 button。由于键盘导航和 AT 等多种原因，此元素不应处理点击事件。更好的做法是用按钮包裹这个图标。您也可以重置按钮的css。

<button
  style={{
     border: "none",
     margin: 0,
     padding: 0,
     background: "none"
  }}
  onClick={this.onShowClick.bind(this, name)}
>
   <i className="fas fa-sort-down" />
</button>

Answer 2

在我的脑海中，没有可复制的最小项目，我在想这不会起作用的几个原因主要有以下几点：

HTML 没有正确处理您的 onClick，因为它包装在 h4 中并应用于 i 标签。我强烈建议避免在 h 和 I 标签上添加点击事件。你可以在这里做的是有一个包装器 div，让你的 h4 与你的 i 标签内联，然后用另一个 div 包装后者你应用你的 onClick。

为什么我不能使用 React 将 onClick 与图标一起使用？

Why aren't I able to use onClick with an icon using React?

jsx

reactjs

react-state