const App = () =>{
const handleSubmit =(event) =>{
event.preventDefault();
alert(
`FirstName:${event.target[0].value}, LastName :${event.target[1].value}`
);
console.dir(event.target);
}
return(
<form onSubmit ={handleSubmit}>
<label htmlFor = "fname">First Name: </label>
<br/>
<input type="text" id ="fname" defaultValue="Jone"/>
<br/>
<label htmlFor = "lname">Last name: </label>
<br/>
<input type="text" id="lname" name="lname" defaultValue="Doe"/>
<br/>
<br/>
<input type="submit" value="Submit"/>
</form>
);
};
ReactDOM.render(<APP />, document.getElementById("root"));
console.dir 로 보며 form 태그의 구조가 보인다 -> 왜 0 , 1을 적었는지 알 수 있다
하지만 해당 로직은 폼 태그에서 fname lname 의 순서가 바뀌면 0 1 이 아닌 다른 숫자를 입력 해야 하는 경우가 생길 수 있다.
<script type="text/babel">
const App = () => {
const handleSubmit = (event) => {
event.preventDefault();
alert(
`FirstName:${event.target.elements.fname},LastName: ${event.target.elements.lname}`
);
console.dir(event.target.elements);
};
return (
<form onSubmit={handleSubmit}>
<label htmlFor="fname">First name: </label>
<br />
<input type="text" id="fname" defaultValue="John" />
<br />
<label htmlFor="lname">Last name: </label>
<br />
<input type="text" id="lname" name="lname" defaultValue="Doe" />
<br />
<br />
<input type="submit" value="Submit" />
</form>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
</script>
event.target.elements 에서 찾아가면 fname 과 lname 에 이름과 성이 있음을 확인 할 수 있다, 이제 폼태그에서 순서가 바뀌어도 이름을 적어줘서 수정이 가능하다