[TIL] 리액트 input 값 제출 후 input 태그 초기화하기

 

 

To do list 페이지를 만드는 중에 할일과 내용을 채우고 추가를 한 후에도 썼던 텍스트가 그대로 남는 부분과

빈칸일 때도 추가가 되는 오류가 있었다. 

 

const [title, setTitle] = useState("");
const [text, setText] = useState("");
 
const addTextHandler = () => {
    const newContent = {
      id : new Date().getTime(),
      title: title,
      text: text,
      isDone: false,
    };
    setContents([...contents, newContent]);
  }

 

첫번째로,

addTextHandler는 추가 버튼을 누를 시 동작하는 함수이다.

버튼을 클릭하면 To do 박스가 아래에 생성되는 것과 동시에 input 내용이 빈킨이 되어야 하기 때문에

이 함수 안에 input 값을 받는 함수인 setTitle과 setText를 초기화하는 함수를 넣어야 한다.

 

두번째로,

할일과 내용 둘 중 하나라도 빈칸일 경우 추가 버튼을 눌러도 생성되지 않게 하기 위해

alert창으로 빈칸을 채우도록 경고문을 넣으려 한다.

 

 const [title, setTitle] = useState("");
 const [text, setText] = useState(""); 

 const addTextHandler = () => {
      if(title === "" || text === "") {
        alert("빈칸을 채워주세요!");
        return;
      }
 const newContent = {
      id : new Date().getTime(),
      title: title,
      text: text,
      isDone: false,
    };
    setContents([...contents, newContent]);
    setText("");
    setTitle("");
  }