버튼 클릭 시에만 input값 변경하기

eventhandler에 조건문을 넣어라

 

조건문안의 조건식에 들어오는 건 '함수'가 아니라 최신의 '값'이여야한다.

조건식은 평과결과 true, false에 따라 실행된다. 그러므로 값이 들어가야 한다.

            <Content>
              <input id="username" type="text" value={username} onChange={handleTextChange} />
              <CloseIcon onClick={handleDelete} />
            </Content>

잘못된 생각

const [username, setUsername] = useState("");

const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (handleDelete) { //함수를 넣음
      setUsername(event.target.value);
    }
  };
  
 const handleDelete = (event: any) => {
    setUsername("");
  };

잘된 생각

 

const [username, setUsername] = useState("");

const handleTextChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (username === "") { //setUsername을 통해 업데이트된 최신의 값 username
      setUsername(event.target.value);
    }
  };

  const handleDelete = (event: any) => {
    setUsername("");
  };