按钮内的图标不会触发 React 上的附加功能答案

【问题标题】：icon inside button does not trigger attached function on React按钮内的图标不会触发 React 上的附加功能
【发布时间】：2018-09-28 04:55:43
【问题描述】：

我正在 React 上构建应用程序。我有一个项目列表表，并且在图标上有困难的调用功能。

deleteItem = event => {
    this.props.deleteRecord(event);
};

const RecordList = records.map(({ category, task, duration, id }, i) => (
        <tr className="record-item" key={i} id={id}>
            <td>
                <span className="recordItem">{category}</span>
            </td>
            <td>
                <span>{task}</span>
            </td>
            <td className="time-trashIcon-container">
                <span>{duration}</span>
                <button
                    type="button"
                    className="trashIcon"
                    id={id}
                    onClick={this.deleteItem}
                >
                    <i className="far fa-trash-alt" />
                </button>
            </td>
        </tr>
    ));

我想要达到的目标

当用户点击垃圾桶按钮（按钮标签内的图标）时，它会调用一个函数来删除项目。

问题

目前，只有当我点击按钮填充时，而不是图标本身才会触发删除功能。单击图标不会触发任何事情。

我尝试了什么 我将图标包装在 span 内并尝试将删除功能作为 onClick eventListener 提供。它会触发一个函数，但找不到我想传递的属性 id of each item 我需要删除目标项目。

我不想使用 jQuery。我试过data-x 来传递财产，但也没有用。任何帮助将不胜感激。

提前谢谢你。

【问题讨论】：

标签： html reactjs

【解决方案1】：

把它放在按钮里面。如果您使用ES6，则使用以下语法无需绑定

onClick={e => this.deleteItem(id, e)}

在里面写下你的删除代码。

deleteItem(id, event) {
       //TO-DO delete code
}

你可以使用<a>代替按钮

<a  className="trashIcon"
    id={id}
    onClick={e => this.deleteItem(id, e)}/> <i className="far fa-trash-alt"/></a>

【讨论】：

<button><i/></button 和 <a> 标签都不起作用。我尝试了几件事，很简单<span><i/></span>。不过感谢您的评论！祝你有美好的一天！

【解决方案2】：

为可能有类似问题的任何人回答我自己的问题:)

在下面尝试了一些东西之后......

<a id={id} onClick={this.delete}>
<button id={id} onClick={this.delete}><a id={id} onClick={this.delete}><i className='trashIcon'></a></button>
<button id={id} onClick={this.delete}><span id={id} onClick={this.delete}><i className='trashIcon'></span></button>

在点击图标的填充时，它们都会调用删除功能，而不是图标本身。

工作代码只是把<span><i/><span>

【讨论】：