事件绑定中的this问题
生活随笔
收集整理的這篇文章主要介紹了
事件绑定中的this问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函數this問題</title>
</head>
<body>
<button id="btn">點我</button>
<script>var btn = document.getElementById('btn')const user = {name: 'Jack'}function handleClick(e) {console.log(this)}btn.onclick = handleClick
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10-帶有狀態的組件.html</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">class MyComponent extends React.Component {constructor () {// 如果子類加入了 constructor 構造函數，則一定要手動調用父類的構造函數 supersuper()// React 組件需要通過手動為組件類添加 state 成員來初始化：ViewModel// state 等價于 Vue 中的 data// 接下來就可以在該組件管理的模板中通過 {} 來訪問綁定數據了this.state = {message: 'Hello, MyComponent!'}}render () {return (<div><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1>{/** 事件綁定函數默認情況下內部的 this 指向 Window* 自動接收一個 event 事件源對象* 1. this 指向了 Window* 2. 只能得到 event 無法傳參*/}<button onClick={this.handleClick}>點擊改變 message</button>{/** bind 了 this 的函數調用的時候，好會給你傳遞一個 event 事件源對象* 內部的 this 就是你 bind 的那個參數* 1. 可以指定 this* 2. 支持傳參數，參數在前，事件源對象在最后* 推薦這種方式*/}<button onClick={this.handleClick.bind(this, 123, 456)}>點擊改變 message</button>{/** 當點擊 onClick 的時候，調用綁定了 this 的箭頭函數* 箭頭函數內部的 this 是組件實例* 所以我可以直接在調用函數中再調用 this.handleClick() 函數*/}<button onClick={(e) => {this.handleClick(e, 123, 456)}}>點擊改變 message</button></div>)}// 規范：處理事件方法都取名為 handlexxxhandleClick (num1, num2, e) {console.log(num1, num2, e)// console.log('handle click')// console.log(this) // 默認是 window// React 不是使用的類似于 Vue 中的 Object.defineProperty() 方式 get、set// this.state.message = 'hello world'// 現在只需要知道，如果要修改 state 中的數據并且希望得到視圖更新，則一定要使用// this.setState 方法// this.setState({// message: 'hello world'// })}}const element = <MyComponent />ReactDOM.render(element, document.getElementById('app'))
</script>
</body>
</html>
?
總結
以上是生活随笔為你收集整理的事件绑定中的this问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 组件的状态
- 下一篇： 再次强调事件绑定中this的坑