React

Documents

---

Step03

---

1. 폼 (form)

제어 컴포넌트(controlled components)

import { useState } from 'react'
export default function controlledComponentsExample() {
	const [state, setState] = useState('')
    const handleSubmit = (event)=>{
      const value = event.target.value
      
    }
	return (
    	// 아래 예제 활용
    )
}

1) input 태그

<form onSubmit={handleSubmit}>
  <label>
    Name:
    <input type="text" value={state} onChange={handleChange} />
  </label>
  <input type="submit" value="Submit" />
</form>

• 폼 제출을 막고 input 값을 state로 받아 사용하기

2) textarea 태그

<form onSubmit={handleSubmit}>
  <label>
    Essay:
    <textarea value={state} onChange={handleChange} />
  </label>
  <input type="submit" value="Submit" />
</form>

3) select 태그

<form onSubmit={handleSubmit}>
  <label>
    Pick your favorite flavor:
    <select value={state} onChange={handleChange}>
      <option value="grapefruit">Grapefruit</option>
      <option value="lime">Lime</option>
      <option value="coconut">Coconut</option>
      <option value="mango">Mango</option>
    </select>
  </label>
  <input type="submit" value="Submit" />
</form>