import React from "react";
import ReactDOM from "react-dom";
class SignUpForm extends React.Component {
constructor() {
super();
this.state = {
email: "",
password: ""
};
}
handleEmailChange = evt => {
this.setState({ email: evt.target.value });
};
handlePasswordChange = evt => {
this.setState({ password: evt.target.value });
};
handleSubmit = evt => {
if (!this.canBeSubmitted()) {
evt.preventDefault();
return;
}
const { email, password } = this.state;
alert(`Signed up with email: ${email} password: ${password}`);
};
canBeSubmitted() {
const { email, password } = this.state;
return email.length > 0 && password.length > 0;
}
render() {
const isEnabled = this.canBeSubmitted();
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Enter email"
value={this.state.email}
onChange={this.handleEmailChange}
/>
<input
type="password"
placeholder="Enter password"
value={this.state.password}
onChange={this.handlePasswordChange}
/>
<button disabled={!isEnabled}>Sign up</button>
</form>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<SignUpForm />, rootElement);
제어 된 입력을 사용한다는 것은 모든 입력 값을 상태에 저장한다는 것을 의미합니다. 그런 다음 모든 값 변경에 대한 특정 조건을 평가하고 그에 따라 무언가를 수행 할 수 있습니다. 이전에는 버튼을 비활성화하기 만했습니다.