리액트, form태그 alert 에 정보 보기

서울IT코드정리 /kyChoi·2021년 11월 17일
0

리랙트

목록 보기
10/18
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 에 이름과 성이 있음을 확인 할 수 있다, 이제 폼태그에서 순서가 바뀌어도 이름을 적어줘서 수정이 가능하다

profile
건물주가 되는 그날까지

0개의 댓글