다음 React 구성 요소가 있습니다.
class PlayerRow extends Component {
activateKey(){
$(this).addClass('active')
}
render() {
return (
<div className="row-par">
<div className="details-cont">
</div>
<div className="key-cont">
<div onClick={this.activateKey} className="key"></div>
<div onClick={this.activateKey} className="key"></div>
<div onClick={this.activateKey} className="key"></div>
</div>
</div>
)
}
}
중첩 된 div를 클릭 할 때 activateKey 기능을 수행하려고하지만 앱을 렌더링 할 때마다 onclick 속성이 모든 div에서 제거됩니다. 왜 그럴까요?
React는 이벤트 리스너 자체를 바인딩하므로 onClick이 DOM에서 onclick 속성을 직접 생성하지 않습니다. 그러나 코드는 실제로 작동합니다 (스 니펫 참조).
class PlayerRow extends React.Component {
activateKey() {
console.log('ddd')
}
render() {
return (
<div className="row-par">
<div className="details-cont">
</div>
<div className="key-cont">
<div onClick={this.activateKey} className="key">asd</div>
<div onClick={this.activateKey} className="key">qwe</div>
<div onClick={this.activateKey} className="key">zxc</div>
</div>
</div>
)
}
}
ReactDOM.render(
<PlayerRow/>,
document.getElementById('container')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>그래도 두 가지를 제안 .bind(this)합니다. 액션 핸들러에 사용하거나 더 나은 방법은 기본적으로 범위를 상속하므로 화살표 기능을 사용하는 것입니다.
반응 문서에서 :
handleClick = () => {
console.log('this is:', this);
}
참조 : https://facebook.github.io/react/docs/handling-events.html
두 번째-jQuery를 사용하지 마십시오. React를 사용하여 DOM을 관리하고 jQuery는 기본적으로 부작용을 생성하므로 반응이 작동하는 방식을 방해합니다. React는 컴포넌트의 상태 또는 props에 따라 뷰를 자동으로 렌더링합니다. 최적화는 굉장하며 jQuery는 props도 state도 편집하지 않기 때문에 React의 멋진 기능을 활용하지 않습니다.
원하는 것을 얻기 위해 어떤 블록이 클릭되었는지 알려주는 매개 변수를 액션 핸들러에 제공 할 수 있습니다 onClick={() => activateKey(1)}. 핸들러에서 활성 ID를 로컬 상태에 저장하고 ID가 키 ID와 일치하는지 여부에 따라 조건부로 블록에 클래스를 제공하십시오. 그게 내 생각입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다