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')
);