import React, { useState } from "react";
function App() {
const [value, setValue] = useState("");
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
const {
currentTarget: { value },
} = event;
setValue(value);
};
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log("hello", value);
};
return (
<div>
<form onSubmit={onSubmit}>
<input
value={value}
onChange={onChange}
type="text"
placeholder="username"
/>
<button>Log in</button>
</form>
</div>
);
}
export default App;
반응형
'FRONT > REACT' 카테고리의 다른 글
[React] Styled-component- Global Style 사용하기 (0) | 2022.02.18 |
---|---|
[React] React.memo 사용법 (0) | 2022.02.16 |
[React] Styled Component (Themes) (0) | 2022.01.20 |
[React] Styled Component(As, Attr) (0) | 2022.01.20 |
[React] Styled Component (컴포넌트 확장) (0) | 2022.01.19 |