<script type="text/babel">
const Password = ({ handlePasswordChange }) => {
return (
<>
<label>PW : </label>
<input type="password" onChange={handlePasswordChange} />
</>
);
};
const Id = ({ handleIdChange }) => {
return (
<>
<label>Id : </label>
<input onChange={handleIdChange} />
</>
);
};
const App = () => {
const [id, setId] = React.useState("");
const [password, setPassword] = React.useState("");
const handleLoginClick = () => {
alert(`id:${id}, pw:${password}`);
};
const handleIdChange = (event) => {
setId(event.target.value);
console.log(`id : ${event.target.value.length}`);
};
const handlePasswordChange = (event) => {
setPassword(event.target.value);
console.log(`pw : ${event.target.value.length}`);
};
return (
<>
<Id handleIdChange={handleIdChange} />
<br />
<Password handlePasswordChange={handlePasswordChange} />
<button
disabled={id.length === 0 || password.length === 0}
onClick={handleLoginClick}
>
LOGIN
</button>
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>