eventHandler에서 React의 특정 구성 요소를 어떻게 변경할 수 있습니까?
루카스 산토스
나는 매우 간단해야 할 노력하고있어하지만 내가 사용하는 특정 구성 요소를 참조하여 얻을 수 아니에요 보이는 이
그래서 여기에 App.js가 있습니다.
import React, { Component } from 'react';
import CoolBox from './coolBox.js';
import './App.css';
class App extends Component {
changeColor(){
$(this).css('background','blue');
}
render() {
return (
<div className="App">
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
<CoolBox changeColor={function(){ this.changeColor() }.bind(this)} />
</div>
);
}
}
export default App;
그리고 여기에 빨간색 배경의 간단한 상자 인 CoolBox.js가 있습니다.
import React, { Component } from 'react';
import $ from 'jquery';
class CoolBox extends Component {
render() {
return (
<div onClick={this.props.changeColor} className="box"></div>
);
}
}
export default CoolBox;
단순히 다음과 같이 보입니다. 
이제 제가 달성하려는 것은 3 개의 상자 중 하나를 클릭하면 클릭 한 특정 상자에서만 배경색이 변경됩니다.
$ (this) 를 참조 할 수없는 경우 jquery 메서드를 사용할 수없는 것 같습니다 . 그렇다면 React 내에서이 간단한 기능을 어떻게 달성 할 수 있습니까?
Sagiv bg
You don't need jQuery for this. There are couple of way to reference components in the DOM and there are couple of patterns of such components(controlled and uncontrolled) you should read about it.
As for you solution, this is a simple solution just to get you start with.
On event handlers you can access the event as an argument. changeColor(e) as e is the object that holds the event information as well as the target (the div you clicked in your case).
So basically what you can do in App.js is this:
class App extends React.Component {
constructor(props){
super(props);
this.changeColor = this.changeColor.bind(this);
}
changeColor(e){
e.target.style.background = "blue";
}
render() {
return (
<div className="App">
<CoolBox changeColor={this.changeColor} />
<CoolBox changeColor={this.changeColor} />
<CoolBox changeColor={this.changeColor} />
</div>
);
}
}
Please note
As you can see i bind the handler in the constructor instead of in the render method. that way you only bind it once and not on each render call witch will create a new instance on each render. that is better for performance.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
Installshield에서 레지스트리 키의 구성 요소를 어떻게 변경할 수 있습니까?
- 2
fabric-composer 정의에서 chaincode, nodejs 구성 요소를 어떻게 생성 할 수 있습니까?
- 3
반응에서 비디오 끝의 구성 요소 상태를 어떻게 설정할 수 있습니까?
- 4
React의 다른 구성 요소에서 변수를 어떻게 읽을 수 있습니까?
- 5
특정 버전의 NodeJ를 어디서 어떻게 구할 수 있습니까?
- 6
React에서 다른 구성 요소의 인증 상태를 어떻게 동기화 할 수 있습니까?
- 7
VS Code의 오른쪽 상단에있는 구성 요소는 무엇입니까? 설정을 어떻게 변경할 수 있습니까?
- 8
React의 형제 구성 요소간에 데이터를 어떻게 전달할 수 있습니까?
- 9
변수의 값을 React 구성 요소에 어떻게 전달할 수 있습니까?
- 10
Java에서 PriorityQueue의 요소를 어떻게 수정할 수 있습니까?
- 11
React-다른 js 파일의 한 구성 요소에서 다른 구성 요소로 API 데이터를 어떻게 전달할 수 있습니까?
- 12
DataGridView에서 특정 행의 행 높이를 어떻게 변경할 수 있습니까?
- 13
변수 정의로 try / catch를 어떻게 구성 할 수 있습니까?
- 14
Python-Selenium : 어떻게 테이블의 특정 요소를 긁어내어 분수에서 소수로 변환 할 수 있습니까?
- 15
Arraylist에서 특정 요소를 어떻게 검색 할 수 있습니까? (java)
- 16
div에서 특정 HTML 요소를 어떻게 선택할 수 있습니까?
- 17
react.js 구성 요소에서 Bootstrap 5 Popover를 어떻게 사용할 수 있습니까?
- 18
sudo의 특정 명령에 대한 * 모든 * 환경 변수를 어떻게 유지할 수 있습니까?
- 19
numpy에서 배열의 특정 요소를 변경할 수 있습니까?
- 20
React에서 부모가 다른 구성 요소의 prop 또는 state 값을 프로그래밍 방식으로 어떻게 변경할 수 있습니까?
- 21
Vue 앱의 모든 구성 요소에서 Buefy 토스트를 어떻게 사용할 수 있습니까?
- 22
Angular 2에서 동일한 파일의 구성 요소를 어떻게 사용할 수 있습니까?
- 23
React에서 부모 구성 요소는 응답에서 자식 구성 요소에서 수행되는 비동기 가져 오기 기능의 상태를 어떻게 설정할 수 있습니까?
- 24
자식 구성 요소의 상태를 부모에게 어떻게 전달할 수 있습니까?
- 25
특정 차원에서 텐서의 MSE를 어떻게 구할 수 있습니까?
- 26
React Dev Tool (프로덕션시)에서 구성 요소 상태 세부 정보를 어떻게 보호 할 수 있습니까?
- 27
Bootstrap의 색 구성표를 어떻게 변경할 수 있습니까?
- 28
파일 경로에있는 모든 구성 요소의 권한을 어떻게 나열 할 수 있습니까?
- 29
React Native에서 텍스트 구성 요소의 줄 수를 어떻게 얻을 수 있습니까?
몇 마디 만하겠습니다