跳到主要内容

绑定

2023年11月26日
柏拉文
越努力，越幸运

一、onClick={ 普通函数 }​

class App extends React.Component {
    handleClick() {
        console.log('点击事件');
        console.log(this); //undefined
    }
    render() {
        return <button onClick={this.handleClick}>事件</button>;
    }
}

二、onClick={ 箭头函数 }​

class App extends React.Component {
    handleClick = () => {
        console.log(this); //当前组件
    };
    render() {
        return <button onClick={this.handleClick}>事件</button>;
    }
}

三、onClick={ ()=> 函数 }​

class App extends React.Component {
    handleClick(e, args) {
        console.log(this);
        console.log(e);
        console.log(args);
    }
    render() {
        return <div onClick={(e) => this.handleClick(e, '参数')}>点击</div>;
    }
}

四、onClick={ 函数.bind(this,参数) }​

handleClick(args, e) {
    console.log(this);
    console.log(args);
    console.log(e.target);
}
render() {
    return <div onClick={this.handleClick.bind(this, '参数')}>点击</div>;
}

五、onClick={ a ? handler : undefined }​

<div onClick={ a ? handler : undefined}> </div>