1주차 과제 - 입력폼구현(2)

2. 입력폼 구현

 모달창 안에 제목과 내용을 입력할 수 있는 입력 폼을 구현한다.
✅ "글쓰기" 버튼을 눌렀을 때 빈칸이 있다면 빈칸을 포커싱한다.

글쓰기 제출 내용

- 제목

<input
          placeholder="제목"
          ref={titleInputRef}
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
        ></input>

- 내용

<textarea
          ref={textareaInputRef}
          value={textarea}
          placeholder="글쓰기"
          cols="70"
          rows="15"
          onChange={(e) => {
            setTextarea(e.target.value);
          }}
        ></textarea>

(1) 글쓰기 제목과 내용을 state 저장 

  let [input, setInput] = useState(""); // 제목
  let [textarea, setTextarea] = useState(""); // 내용

(2) 제목과 내용이 빈칸일 때

  const titleInputRef = useRef();
  const textareaInputRef = useRef();

useRef로 특정 Dom 선택

 <input
          placeholder="제목"
          ref={titleInputRef}
          value={input}
          onChange={(e) => {
            setInput(e.target.value);
          }}
        ></input>

        {" "}
        <textarea
          ref={textareaInputRef}
          value={textarea}
          placeholder="글쓰기"
          cols="70"
          rows="15"
          onChange={(e) => {
            setTextarea(e.target.value);
          }}
        ></textarea>

if문으로 내용이 빈칸일 때 포커스를 return한다.

const addContent = () => {
    if (input == "") {
      alert("입력해주세요");
      return titleInputRef.current.focus();
    }
    if (textarea == "") {
      alert("입력해주세요");
      return textareaInputRef.current.focus();
    }

 

 

+ 제목은 최대 10자 까지만 작성되어야 한다.

(1) input에 maxlength 넣기

 <input
          maxlength="10"       
          ></input>