JSX-绑定事件
JSX 绑定事件
- JSX 中绑定事件必须使用
驼峰命名
<button onClick={this.btnClick}>按钮</button>
事件监听方法中的 this, 默认情况下 React 在调用事件监听方法的时候, 是通过 apply 来调用的, 并且在调用的时候将监听方法中的 this 修改为了 undefined, 所以默认情况下我们是无法在监听方法中使用 this 的：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../react17/react.development.v17.js"></script>
<script src="../react17/react-dom.development.v17.js"></script>
<script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {}
}
render() {
return (
<div>
<button onClick={this.btnClick}>我是按钮</button>
</div>
)
}
btnClick() {
console.log(this);
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
如何解决监听方法中 this 默认是 undefined 的问题。
监听方法 this 处理
- 箭头函数
- 创建时通过
bind修改 - 注册时通过
bind修改 - 普通函数和箭头函数结合
官方文档：https://zh-hans.reactjs.org/docs/handling-events.html
- 通过箭头函数
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../react17/react.development.v17.js"></script>
<script src="../react17/react-dom.development.v17.js"></script>
<script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {}
}
render() {
return (
<div>
<button onClick={this.btnClick}>我是按钮</button>
</div>
)
}
btnClick = () => {
console.log("BNTang");
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>
- 通过添加监听方法的时候, 手动通过
bind修改监听方法中的this
render() {
return (
<div>
<button onClick={this.btnClick.bind(this)}>我是按钮</button>
</div>
)
}
- 通过在构造函数中, 手动通过
bind修改监听方法中的this
<script type="text/babel">
class Home extends React.Component {
constructor() {
super();
this.state = {}
this.btnClick = this.btnClick.bind(this);
}
render() {
return (
<div>
<button onClick={this.btnClick}>我是按钮</button>
</div>
)
}
btnClick() {
console.log(this);
}
}
ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
- 手动绑定一个箭头函数, 然后再箭头函数的函数体中手动调用监听方法
render() {
return (
<div>
<button onClick={() => {
this.btnClick()
}}>
我是按钮
</button>
</div>
)
}
因为箭头函数中的 this, 就是当前的实例对象, 因为监听方法并不是 React 调用的, 而是我们在箭头函数中手动调用的, 因为普通的方法, 默认情况下谁调用 this 就是谁。
企业开发推荐方案
- 普通函数和箭头函数结合
