onClick
이벤트는 해당 이벤트를 가지고 있는 input
값이 클릭 되었을 때 {}안에 있는 함수를 호출한다.(예시는 위에 있어요~)
이벤트에 등록하는 함수에서는 이벤트 e
객체를 파라미터로 받아와 사용한다.
e.target
은 이벤트가 발생한 DOM인 input DOM을 가르킨다. e.target.value
를 조회하면 input값을 접근할 수 있다.
import React, { useState } from "react";
export default function App() {
const [Text, setText] = useState();
const onChange = (e) => {
setText(e.target.value);
};
return (
<>
<input type="text" onChange={onChange} placeholder="입력" />
<h1>{Text}</h1>
</>
);
import React, { useState } from "react";
export default function App() {
const [user, setUser] = useState({ fname: "초", lname: "기", email: "화" });
function onChange(e) {
setUser((prev) => { // 이전에 있던 user값을 다가지고 옴
return {
...prev,
[e.target.name]: e.target.value
};
});
}
return (
<div className="App">
<form>
<input
type="text"
placeholder="이름"
onChange={onChange}
name="fname"
/>
<input type="text" placeholder="성" onChange={onChange} name="lname" />
<input
type="text"
placeholder="email"
onChange={onChange}
name="email"
/>
<h1>{user.fname}</h1>
<h1>{user.lname}</h1>
<h1>{user.email}</h1>
</form>
</div>
);
}
input type=’text’를 3개를 주고 각자 name을 준다. 서로 같은 함수인 onChange
를 부르고
prev
에 값을 가지고 와서 name이 같은 값에 value
를 바꾼다.