# Forms

# 1. textarea

html

<textarea>
  안녕하세요, 오늘도 페라리를 위해 달립니다...!
</textrarea>  

---

jsx

function RequestForm(props) {
  const [value, setValue] = useState('요청사항을 입력하세요.');
 
  const handleChange = (event) => {
    setValue(event.target.value);
  }
 
  const handleSubmit = (event) => {
    alert('입력한 요청사항: ' + value);
    event.preventDefault();
  }
 
  return(
    <form onSubmit={handleSubmit}>
      <label>
        요청사항 :
        <textarea value={value} onChange={handleChange} />
        // value에 useState의 값이 먼저 들어가 있는다 
        // 그러다 onChange로 인해 값이 변경될 때 handleChange를 통해 
        // event.target.value -> 이벤트가 발생한 타겟의 벨류를 setValue()의 값으로 value를 변경하게 된다
      </label>
      <button type="submit">제출</button>
      // 제출을 누르면 submit을 통해 form에 설정한 onSubmit이 handleSubmit을 실행하게 된다
      // handleSubmit에서는 경고창으로 '입력한 요청사항: ' + value를 띄우게 되고
      // event.preventDefault()로 인해 전송창의 특성상 특정 페이지로 이동하는 것이 아닌 현재 페이지에 머물게 해준다(이벤트의 동작을 멈추는 기능, 페이지의 리프래쉬를 막아줌)
    </from>
  ) 
}            

# 2. Select 태그

- Drop-down목록을 보여주기 위한 HTML 태그

HTML - Select

<select>
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option selected value="grape">포도</option> <!-- selected 옵션으로 기본 선택으로 지정했다 -->
  <option value="watermelon">수박</option>
</select>  

---

jsx

function RequestForm(props) {
  const [value, setValue] = useState('grape');
 
  const handleChange = (event) => {
    setValue(event.target.value);
  }
 
  const handleSubmit = (event) => {
    alert('선택한 과일: ' + value);
    event.preventDefault();
  }
 
  return(
    <form onSubmit={handleSubmit}>
      <label>
        스포츠카를 선택하세요 :
        <select value={value} onChange={handleChange}>
      //<select multiple={true} value={['B','C']}> 여러개의 스포츠카를 선택할 수 있다...!    
          <option value="Ferrari">페라리</option>
          <option value="Lamborghini">람보르기니</option>
          <option value="Ford">포드</option>
          <option value="ASTON MARTIN">에스턴마틴</option>
        </select>
      </label>
      <button type="submit">제출</button>
    </from>
  ) 
}            

# 3. File input태그

- 디바이스의 저장 장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 해주는 HTML 태그

HTML file input 태그

<input type="file"/>

- 읽기 전용
- 리액트에서는 Uncontrolled Component(리액트의 통제를 받지 않는다)

# 4. Multiple Inputs

- 여러 개의 state를 선언하여 각각의 입력에 대해 사용!

jsx

function Reservation(props) {
  const [haveBreakfast, setHaveBreakfast] = useState(true); // 불린타입
  const [numberOfGuest, setNumberOfGuest] = useState(2);   // int타입
 
  const handleSubmit = (event) => {
    alert(`아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}`);
    event.preventDefault();
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        아침식사 여부:
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange={(event} => {
            setHaveBreakfast(event.target.checked);
          }} />
      </label>
      <br />
      <label>
        방문객 수:
        <input
          type="number"
          value={numberOfGuest}
          onChange={(event} => {
            setNumberOfGuest(event.target.value);
          }} />
      </label> 
      <button type="submit">제출</button>  
    </form>    
  );
}        

# Input Null Value

jsx

ReactDOM.render(<input value="hit" />, rootNode);

setTimeout(function() {
  ReactDOM.render(<input value={null} />, rootNode);
}, 1000);