event로 state 상태 속성 변경해주기
import React, { Component } from 'react';
class State extends React.Component {
constructor() {
super();
this.state = {
color : ‘red’
};
}
handleColor = () => {
this.setState({
color : 'grey'
})
}
render() {
return (
<div>
<input
style={{color : this.state.color}}
type="text" value="id">
</input>
<button
onClick={this.handleColor}>
로그인</button>
</div>
);
}
}
export default State;
Button 의 onClick event 발생 전
Button 의 onClick event 발생 후
: onClick event를 통해서 {this.handleColor}를 실행하고 handleColor 함수 내에서 setState를 통해 변경한 state 요소 {color : 'grey’}가 본래 state 요소가 적용되었던 input 내의 state가 변경되어 적용되었음을 확인할 수 있다.