React 이벤트 처리 함수의this
'use strict'
let bob = {
name: 'Bob',
greet(name) {
console.log(this);
return (
console.log(`hello ${name}, my name is ${this.name}`)
)
}
}
/**
* { name: 'Bob', greet: [Function: greet] }
* hello jane, my name is Bob
*/
bob.greet('jane')
let greetFn = bob.greet
/**
* undefined this undefined
* TypeError: Cannot read property 'name' of undefined
*/
greetFn('john')
Use bind
'use strict'
let bob = {
name: 'Bob',
greet(name) {
console.log(this);
return (
console.log(`hello ${name}, my name is ${this.name}`)
)
}
}
/**
* { name: 'Bob', greet: [Function: greet] }
* hello jane, my name is Bob
*/
bob.greet('jane')
let greetFn = bob.greet
greetFn = greetFn.bind(bob) // Use bind
/**
* { name: 'Bob', greet: [Function: greet] }
* hello john, my name is Bob
*/
greetFn('john')
No bind
class CustomCom extends React.Component {
render() {
return (
)
}
_handleClick() {
console.log(this) // undefined
}
}
Use bind
class CustomCom extends React.Component {
constructor(props) {
super(props)
this._handleClick = this._handleClick.bind(this) // Use bind
}
render() {
return (
)
}
_handleClick() {
console.log(this)
// CustomCom {props: {…}, context: {…}, refs: {…}, updater: {…}, _handleClick: ƒ, …}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.