React绑定事件处理函数的3种方式

React绑定事件处理函数的3种方式

看react官网提到绑定事件处理函数，研究了下有3种方式，做个总结如下：

constructor中绑定

在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定，注意：React.Component创建的组件，其成员函数不会自动绑定this，需要手动绑定，否则this不能获取当前组件实例对象

class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        //在 constructor 中预先将所有的事件处理函数通过 bind 方法进行绑定
        this.handleLoginClick = this.handleLoginClick.bind(this);
        this.handleLogoutClick = this.handleLogoutClick.bind(this);
        this.state = {isLoggedIn: false};
    }

    //e表示事件
    handleLoginClick(event) {
        event.preventDefault();
        this.setState({isLoggedIn: true});
    }

    //e表示事件
    handleLogoutClick(event) {
        event.preventDefault();
        this.setState({isLoggedIn: false});
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button;

        if (isLoggedIn) {
        //注意看这里
            button = <LogoutButton onClick={this.handleLogoutClick}/>;
        } else {
        //注意看这里
            button = <LoginButton onClick={this.handleLoginClick}/>;
        }

        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn}/>
                {button}
            </div>
        );
    }
}

function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting/>;
    }
    return <GuestGreeting/>;
}

function LoginButton(props) {
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    );
}

function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    );
}


ReactDOM.render(
    <LoginControl/>,
    document.getElementById('root')
);

使用类的成员字段定义语法(比较常用)

class LoginControl extends React.Component {
   constructor(props) {
       super(props);
       this.state = {isLoggedIn: false};
       //不在构造函数绑定
   }

   //e表示事件
   handleLoginClick(event) {
       event.preventDefault();
       this.setState({isLoggedIn: true});
   }

   //e表示事件
   handleLogoutClick(event) {
       event.preventDefault();
       this.setState({isLoggedIn: false});
   }

   render() {
       const isLoggedIn = this.state.isLoggedIn;
       let button;

       if (isLoggedIn) {
           //使用类的成员字段定义语法
           button = <LogoutButton onClick={this.handleLogoutClick.bind(this)}/>;
       } else {
           //使用类的成员字段定义语法
           button = <LoginButton onClick={this.handleLoginClick.bind(this)}/>;
       }

       return (
           <div>
               <Greeting isLoggedIn={isLoggedIn}/>
               {button}
           </div>
       );
   }
}

function UserGreeting(props) {
   return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
   return <h1>Please sign up.</h1>;
}

function Greeting(props) {
   const isLoggedIn = props.isLoggedIn;
   if (isLoggedIn) {
       return <UserGreeting/>;
   }
   return <GuestGreeting/>;
}

function LoginButton(props) {
   return (
       <button onClick={props.onClick}>
           Login
       </button>
   );
}

function LogoutButton(props) {
   return (
       <button onClick={props.onClick}>
           Logout
       </button>
   );
}


ReactDOM.render(
   <LoginControl/>,
   document.getElementById('root')
);

通过一个箭头函数将真实的事件处理函数包装一下（最简练）

class LoginControl extends React.Component {
    constructor(props) {
        super(props);
        this.state = {isLoggedIn: false};
        //不在构造函数绑定
    }

    //e表示事件
    handleLoginClick(event) {
        event.preventDefault();
        this.setState({isLoggedIn: true});
    }

    //e表示事件
    handleLogoutClick(event) {
        event.preventDefault();
        this.setState({isLoggedIn: false});
    }

    render() {
        const isLoggedIn = this.state.isLoggedIn;
        let button;

        if (isLoggedIn) {
            //通过箭头函数将真实的事件处理函数进行包装
            button = <LogoutButton onClick={e => this.handleLogoutClick(e)}/>;

        } else {
            //通过箭头函数将真实的事件处理函数进行包装
            button = <LoginButton onClick={e => this.handleLoginClick(e)}/>;
        }

        return (
            <div>
                <Greeting isLoggedIn={isLoggedIn}/>
                {button}
            </div>
        );
    }
}

function UserGreeting(props) {
    return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
    return <h1>Please sign up.</h1>;
}

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if (isLoggedIn) {
        return <UserGreeting/>;
    }
    return <GuestGreeting/>;
}

function LoginButton(props) {
    return (
        <button onClick={props.onClick}>
            Login
        </button>
    );
}

function LogoutButton(props) {
    return (
        <button onClick={props.onClick}>
            Logout
        </button>
    );
}


ReactDOM.render(
    <LoginControl/>,
    document.getElementById('root')
);