React类组件中箭头函数绑定点击事件时方法不触发的问题

先理清两种写法的本质 #

• 你觉得onClick={handleDeleteItem(2)}生效，其实是错误用法：这行代码会在组件每次渲染时直接执行handleDeleteItem(2)，并非点击按钮才触发。你看到的“生效”是页面一加载就执行了删除逻辑，完全不是点击触发的效果，而且组件每次重渲染都会重复调用这个方法，极易引发bug。
• 箭头函数包裹的() => handleDeleteItem(2)没触发，大概率是handleDeleteItem的this指向出了问题。如果父组件传递这个方法时没绑定正确的this，在类组件中调用时会因this指向错误，导致方法内部逻辑执行失败（比如用到this.setState的地方报错，看起来像点击没触发）。

实现点击同时调用两个方法的正确写法 #

方法1：箭头函数内依次调用 #

先确保父组件传递handleDeleteItem时已绑定好this（比如父组件用箭头函数定义该方法，或在构造函数中绑定），子组件中这样写：

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

    return (
        <Fragment>
            <IconButton
                onClick={() => {
                    handleDeleteItem(2);
                    console.log("删除按钮被点击");
                }}>
                <DeleteForeverIcon />
            </IconButton>
        </Fragment>
    );
}

方法2：定义类实例方法（性能更优，避免render内重复创建箭头函数） #

在类组件中单独定义方法，利用类属性箭头函数自动绑定this：

class YourComponent extends React.Component {
    handleButtonClick = () => {
        const { handleDeleteItem } = this.props;
        handleDeleteItem(2);
        console.log("删除按钮被点击");
    }

    render() {
        return (
            <Fragment>
                <IconButton onClick={this.handleButtonClick}>
                    <DeleteForeverIcon />
                </IconButton>
            </Fragment>
        );
    }
}

关键补充：父组件的方法绑定 #

如果父组件的handleDeleteItem是类方法，必须确保它的this正确绑定，两种常用写法：

// 写法1：用箭头函数定义方法，自动绑定this
class ParentComponent extends React.Component {
    handleDeleteItem = (id) => {
        this.setState(prev => ({
            items: prev.items.filter(item => item.id !== id)
        }));
    }

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

// 写法2：在构造函数中手动bind this
class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.handleDeleteItem = this.handleDeleteItem.bind(this);
    }

    handleDeleteItem(id) {
        this.setState(prev => ({
            items: prev.items.filter(item => item.id !== id)
        }));
    }

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

内容的提问来源于stack exchange，提问作者Natyra Blakaj