在箭头函数中使用时未在单击时调用 React 方法答案

【问题标题】：React method not being called on click when used in arrow function在箭头函数中使用时未在单击时调用 React 方法
【发布时间】：2022-09-27 23:35:33
【问题描述】：

所以我在调用我在道具中接收的 React 方法时遇到问题。

这是我的代码

   render() {
    const {    
        handleDeleteItem,
    } = this.props;

    return (
        <Fragment>
                    <IconButton
                        onClick={() => handleDeleteItem(2)}>
                        <DeleteForeverIcon />
                    </IconButton>
        </Fragment>
     )};

但是当我这样使用它时它会起作用

onClick={handleDeleteItem(2)}

我正在使用类组件，我想要实现的主要目标是在该按钮单击时调用 2 个函数，例如一种方法来自道具，另一种方法是简单的（console.log 什么的）

你能把它扩展成一个可运行的minimal reproducible example 来演示这个问题吗？

标签： reactjs

【解决方案1】：

你可以分享主要组件吗？

如果您的“handleDeleteItem”函数返回另一个函数，则您正在使用“onClick={handleDeleteItem(2)}”之类的权利。

【讨论】：

问题是如何在此单击中添加另一个功能？

【解决方案2】：

在handleDeleteItem 的父定义中，您几乎可以肯定具有双重功能return

class Parent extends React.Component {
    handleDeleteItem = (id) => () => {}

    render() {
        return <Child handleDeleteItem={this.handleDeleteItem} />
    }
}

class Child extends React.Component {
    render() {
        return (
            <Fragment>
                <IconButton
                    onClick={() => handleDeleteItem(2)}>
                    <DeleteForeverIcon />
                </IconButton>
            </Fragment>
        )
    }
}

如果您将其设为onClick={() => handleDeleteItem(2)}>，那么额外的匿名函数将使其成为三重回报。当以 handleDeleteItem(2) 调用它时，它已经是一个函数

【讨论】：