[React] form(게시글 등록)

JH Cho·2022년 9월 1일
0

React

목록 보기
5/27
<form
          onSubmit={(e) => {
            e.preventDefault();
            let copy = [...title];
            let copy2 = [...like];
            copy2.push(0);
            setLike(copy2);
            setComment("");
            return comment.trim().length > 0
              ? (copy.push(comment), setTitle(copy))
              : null;
          }}
        >
          <input
            onChange={(e) => {
              return setComment(e.target.value);
            }}
            type={"text"}
            value={comment}
          ></input>
          <button
            onClick={() => {
              // let copy = [...title];
              // let copy2 = [...like];
              // copy2.push(0);
              // setLike(copy2);
              // setComment("");
              // return comment.trim().length > 0
              //   ? (copy.push(comment), setTitle(copy))
              //   : null;
            }}
          >
            게시
          </button>
          <button
            onClick={() => {
              return setComment("");
            }}
          >
            초기화
          </button>
        </form>
  • form의 특수성
    : 위 코드의 주석처리된 코드가 form 태그의 onSubmit에 들어가나 게시 button의 onClick에 들어가나 동일하게 작동한다. 기본적으로 form에서 input에서 enter나 버튼 클릭을 하게 되면 submit 이벤트가 작동하게 되어있어서 그렇다.

    만약 인풋창의 value를 reset하는 기능의 button을 만들고 작동시켜보면 submit 이벤트는 발생하지 않고 button에 달린 이벤트 함수만 발생하게 된다.

profile
주먹구구식은 버리고 Why & How를 고민하며 프로그래밍 하는 개발자가 되자!

0개의 댓글