React.js의 div와 함께 onClick을 사용하는 방법
네모난 칸을 클릭하면 흰색에서 검은색으로 바꿀 수 있는 아주 간단한 어플을 만들고 있습니다.하지만 저는 곤란합니다.사용자가 정사각형을 클릭하여 색을 변경할 수 있도록 onClick 기능을 사용하고 싶은데 작동하지 않는 것 같습니다.span과 빈 p 태그를 사용해 봤지만 그것도 효과가 없습니다.
문제의 코드는 다음과 같습니다.
var Box = React.createClass({
getInitialState: function() {
return {
color: 'white'
};
},
changeColor: function() {
var newColor = this.state.color == 'white' ? 'black' : 'white';
this.setState({
color: newColor
});
},
render: function() {
return (
<div>
<div
style = {{background: this.state.color}}
onClick = {this.changeColor}
>
</div>
</div>
);
}
});
코드펜에 관한 제 작은 프로젝트 링크입니다.http://codepen.io/anfperez/pen/RorKge
마음을 편하게 하기 위해서onClick
event는 div in react에서 동작하므로 코드 구문을 다시 확인하십시오.
다음과 같은 것이 옳습니다.
<div onClick={doThis}>
<div onClick={() => doThis()}>
다음은 틀렸습니다.
<div onClick={doThis()}>
<div onClick={() => doThis}>
(태그를 닫는 것을 잊지 마십시오.)이 점에 주의:
<div onClick={doThis}
div의 닫힘 태그 누락)
이것은 동작합니다.
var Box = React.createClass({
getInitialState: function() {
return {
color: 'white'
};
},
changeColor: function() {
var newColor = this.state.color == 'white' ? 'black' : 'white';
this.setState({ color: newColor });
},
render: function() {
return (
<div>
<div
className='box'
style={{background:this.state.color}}
onClick={this.changeColor}
>
In here already
</div>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('div1'));
ReactDOM.render(<Box />, document.getElementById('div2'));
ReactDOM.render(<Box />, document.getElementById('div3'));
그리고 당신의 css에 당신이 가지고 있는 스타일을 삭제하고 이것을 넣으세요.
.box {
width: 200px;
height: 200px;
border: 1px solid black;
float: left;
}
실제 div를 스타일링해야 합니다.onClick
on. div에 className을 지정한 후 스타일링합니다.렌더링 중인 이 블록도 삭제해야 합니다.App
돔으로, 앱은 정의되어 있지 않습니다.
ReactDOM.render(<App />,document.getElementById('root'));
다음 코드가 동작하게 되었습니다!!
const test = () => {
const onClick = () => console.log('hi');
return (
<div onClick={onClick} aria-hidden="true">
Content here
</div>
)};
당신의 상자는 사이즈가 없습니다.폭과 높이를 설정하면 정상적으로 작동합니다.
var Box = React.createClass({
getInitialState: function() {
return {
color: 'black'
};
},
changeColor: function() {
var newColor = this.state.color == 'white' ? 'black' : 'white';
this.setState({
color: newColor
});
},
render: function() {
return (
<div>
<div
style = {{
background: this.state.color,
width: 100,
height: 100
}}
onClick = {this.changeColor}
>
</div>
</div>
);
}
});
ReactDOM.render(
<Box />,
document.getElementById('box')
);
<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='box'></div>
이 작업은 반응으로 수행할 수 있지만, 버튼이나 앵커 등의 클릭 이벤트에 대한 동작이 이미 있는 대신 div와 함께 onClick을 사용하는 것은 잘못된 관행이므로 가능한 한 피해야 합니다.
이것도 동작합니다.
나는 방금 와 바꿨다.this.state.color==='white'?'black':'white'
.
드롭다운 값에서 색상을 선택하여 '검은색' 대신 업데이트할 수도 있습니다.
(코드펜)
react.js를 위한 간단한 테스트 버튼이 필요했어요.이게 내가 한 일이고 효과가 있었어.
function Testing(){
var f=function testing(){
console.log("Testing Mode activated");
UserData.authenticated=true;
UserData.userId='123';
};
console.log("Testing Mode");
return (<div><button onClick={f}>testing</button></div>);
}
언급URL : https://stackoverflow.com/questions/40535444/how-to-use-onclick-with-divs-in-react-js
'programing' 카테고리의 다른 글
Heroku가 HTTP 응답을 잘랐습니까? (0) | 2023.03.25 |
---|---|
데이터와 파일을 포함한 JSON을 Web API에 게시합니다(jQuery / MVC). (0) | 2023.03.20 |
투고 ID에서 카테고리 이름 가져오기 (0) | 2023.03.20 |
wordpress 목록 사용자 역할 (0) | 2023.03.20 |
ORA-00984: 열은 여기에 사용할 수 없습니다. (0) | 2023.03.20 |