Question

我在React上构建app。我有一个项目列表表，并且在图标上有很难调用功能。

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的每个项的属性，我需要删除目标项。

我不想使用jQuery。我已经尝试data-x传递属性但也没有工作。任何帮助将不胜感激。

提前谢谢你。

Answer 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>

Answer 2

为可能遇到类似问题的人回答我自己的问题:)

在尝试下面的一些事情后......

<a id={id} onClick={this.delete}＆GT;
<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>

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

2 个答案: