0
点赞
收藏
分享

微信扫一扫

JSX-绑定事件

JSX 绑定事件

  • JSX 中绑定事件必须使用​​驼峰命名​
<button onClick={this.btnClick}>按钮</button>

事件监听方法中的 this, 默认情况下 React 在调用事件监听方法的时候, 是通过 ​​apply​​​ 来调用的, 并且在调用的时候将监听方法中的 this 修改为了 undefined, 所以默认情况下我们是无法在监听方法中使用 ​​this​​ 的:

JSX-绑定事件_React

<!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>

JSX-绑定事件_事件监听_02

如何解决监听方法中 ​​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>

JSX-绑定事件_scala_03

  • 通过添加监听方法的时候, 手动通过​​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 就是谁。

企业开发推荐方案

  • 普通函数和箭头函数结合




举报

相关推荐

0 条评论