柚子快报邀请码778899分享:React中的事件绑定
在react中,你必须谨慎对待 JSX 回调函数中的 this,类的方法默认是不会绑定 this 的。如果你忘记绑定 this.handleClick 并把它传入 onClick, 当你调用这个函数的时候 this 的值会是 undefined。
1.在构造函数中绑定this或者在调用时绑定this
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个绑定是必要的,使`this`在回调中起作用
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
{this.state.isToggleOn ? 'ON' : 'OFF'}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
在调用时绑定this,事件对象以及更多的参数将会被隐式的进行传递
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个绑定是必要的,使`this`在回调中起作用
//this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
{this.state.isToggleOn ? 'ON' : 'OFF'}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
2.属性初始化器语法
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个绑定是必要的,使`this`在回调中起作用
//this.handleClick = this.handleClick.bind(this);
}
//看这里
handleClick = () => {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
{this.state.isToggleOn ? 'ON' : 'OFF'}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
3.在回调函数中使用箭头函数()
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 这个绑定是必要的,使`this`在回调中起作用
//this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
/*在回调函数中使用箭头函数*/
{this.state.isToggleOn ? 'ON' : 'OFF'}
);
}
}
ReactDOM.render(
document.getElementById('root')
);
使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下,这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件,这些组件可能会进行额外的重新渲染。我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。
柚子快报邀请码778899分享:React中的事件绑定
相关阅读
发表评论