공군소령김도지
624
2021-07-28 14:30:51
4
142

리액트 form 태그 사용을 좀 가르켜 주세요.


import React, { useState } from "react";

const Counter = () => {
  const [userValuesetUserValue] = useState({
    name: "",
    nickname: "",
  });

  const {name,nickname} = userValue;


  const btn = (e=> {
    e.preventDefault()
    setUserValue({ 
        ...userValue
        [e.target.name]: e.target.value 
    });
  };

  return (
    <div>
      <form>
        <input name="name" />
        <input name="nickname"/>
        <input type="submit" onClick={btn}/>
      </form>
        <div>{name}</div>
        <div>{nickname}</div>
    </div>
  );
};

export default Counter;


보시는 바와 같이 onClick={btn}  을 통해 userValue state를 출력시킬려고 하는데요 

<div>{name}</div>
<div>{nickname}</div>

에 아무것도 안뜹니다.... 왜 이러는 걸까요... onChange는 되는데 onClick을 통한 submit이 안됩니다. 

form태그 안에 요소로 onsubmit={btn} 이런식으로 해도 name과 nickname이 뜨지 않습니다. (저는 submit 버튼을 누르면 네임과 닉네임이 뜨게 하고 싶습니다.)


리액트에서 form 태그는 기존에 php 에서 하는 방식과 input을 받는 방식이 다른건가요?

기존의 php 에서는 action으로 서버사이드로 넘기면 name으로 넘겨온 데이터를 추적해 value 값을 받지 않습니가?

여기도 e.target으로 name의 위치를 찾아서value를 받는것 같은데 

왜 submit에 onClick을 쓰는게 안되는 건가요?




0
  • 답변 4

  • ljhyeok
    35
    2021-07-28 14:40:23

    돌려보진 않았지만
    form 태그 onSubmit 이벤트 핸들러에 btn 함수 달아줘야 할 것 같은데요.

    지금 해놓으신거는 type이 submit인 input 태그에 클릭 이벤트로 btn 함수 등록 하신건데,
    그렇게 되면 e 파라미터로 넘어오는건 input 태그의 이벤트 객체 아니에요?
    e.target.name 하면 당연히 아무것도 없을텐데...

  • 공군소령김도지
    624
    2021-07-29 03:30:48
    import React, { useState } from "react";

    const Counter = () => {
      const [userValuesetUserValue] = useState({
        name: "",
        nickname: "",
      });

      const {name,nickname} = userValue;


      const btn = (e=> {
        e.preventDefault()
        setUserValue({ 
            ...userValue
            [e.target.name]: e.target.value 
        });

        console.log('sibar')
      };

      return (
        <div>
          <form onSubmit={btn}>
            <input name="name" />
            <input name="nickname"/>
            <input type="submit" />
          </form>
            <div>{name}</div>
            <div>{nickname}</div>
        </div>
      );
    };

    export default Counter;


    이렇게 했는데도 서브밋 버튼을 누르니 여전히 실행이 되지 않네요....

  • ljhyeok
    35
    2021-07-29 09:40:51

    해결 하셨나요?

    setUserValue({ 
            ...userValue
            [e.target.name]: e.target.value 
        });

    이 부분이 잘못 된 것 같습니다.

    e.target.name을 하면 <input name="name"/> 태그 객체가 넘어옵니다.

    e.target 자체가 form 태그 객체이므로, input 태그에 접그하려면 지정하신 name을 이용해서 접근한 뒤 value property에 접근하셔야 됩니다.

    e.target.nickname.value 처럼요...

    반복되는 코드 더 줄일 수 있지만, 간단한 예제라서 하드코딩으로 대체합니다 ㅎㅎ;
    아래처럼 하시면 나올거에요

    import React from 'react';
    
    function App() {
      const [user, setUser] = React.useState({
        name: '',
        nickname: ''
      });
    
      const onSubmit = (e) => {
        e.preventDefault();
        setUser({
          name: e.currentTarget.name.value,
          nickname: e.currentTarget.nickname.value,
        })
      }
      
      return (
        <div>
          <form action="" onSubmit={onSubmit}>
            <input type="text" name="name" />
            <input type="text" name="nickname" />
            <input type="submit" />
          </form>
          <div>{user.name}</div>
          <div>{user.nickname}</div>
        </div>
      );
    }
    
    export default App;
    


  • 공군소령김도지
    624
    2021-07-29 12:22:02
    const btn = (e=> {
      e.preventDefault()
      setUserValue({ 
          ...userValue
          [e.target.name]: e.target.value 
      });

      console.log('sibar')
    };

    return (
      <div>
        <form onSubmit={btn}>
          <input name="name" />
          <input name="nickname" onChange={btn}/>
          <input type="submit"  onChange={btn}/>
        </form>
          <div>{name}</div>
          <div>{nickname}</div>
      </div>
    );


    보시는 것과 같이 onchange를 했을때는 

    setUserValue({ 
      ...userValue
      [e.target.name]: e.target.value 
    });


    e.target.name이 저절로 input에 제가 지정한 name으로 바뀌는것 같더군요. 


    근데 form 에 onSubmit를 했을 경우엔 

    첫번째 input의 name만 알아먹으니 

    name별로 따로 할당을 해야 된다는 말씀이신가요?

  • 로그인을 하시면 답변을 등록할 수 있습니다.