방금 React와 JavaScript를 배우기 시작했습니다. 모두 handleClick
및 render
기능은 클래스의 this
객체를 사용하나의 함수가 바인딩을 필요로하고 다른 함수가 왜 필요하지 않습니까?
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
내가보기 :
튜토리얼을 통해가는 동안, 나는 토글 버튼을 생성하는 구성 요소의 예제 코드에 도착 범위 밖 (오른쪽?)
그럼 왜 단지 handleClick
에 바인딩하면됩니까?
나는 react를 사용하지는 않았지만,'onClick' 함수 호출은'this' 키워드를'window' 객체 또는 비슷한 것으로 대체합니다. 이것은 실제로'this' ='window'로 콜백을 호출하는 기본'addEventListener' 메쏘드에서 발생합니다. 아마도'handeClick'이'window'에 의해 호출 되었기 때문에,'this' 키워드는'window'에 의해 덮어 쓰여지지 않도록, 또는 click 함수를 호출하는 누군가에 의해 덮어 쓰여지지 않아야합니다. – Cristy