import React from 'react';
import ReactDOM from 'react-dom';
class Contact extends React.Component {
constructor(props) {
super(props);
this.state = {
password: 'swordfish',
authorized: false
};
this.authorize = this.authorize.bind(this);
}
authorize(e) {
const password = e.target.querySelector(
'input[type="password"]').value;
const auth = password == this.state.password;
this.setState({
authorized: auth
});
}
render() {
const login = (
<form action="#" onSubmit={this.authorize}>
<input type="password" />
<input type="submit" />
</form>
)
const contactInfo = (
<ul>
<li>
client@example.com
</li>
<li>
555.555.5555
</li>
</ul>
);
return (
<div id="authorization">
<h1>{this.state.authorized ? "Contact" : "Enter the Password"}</h1>
{this.state.authorized ? contactInfo : login}
</div>
);
}
}
ReactDOM.render(
<Contact />,
document.getElementById('app')
);
JSX 요소를 render() 안의 변수로 주어서 조건별로 렌더링하기
컴포넌트 안에 있는 변수, 함수를 호출할 때엔 this
꼭 붙여야한다!
this = 위치한 block을 감싸고 있는 객체
submit 이벤트는 <form>
태그에 주어야한다