[TIL] React Documents Step03

Keunyeong Leeยท2022๋…„ 10์›” 26์ผ
0

[TIL]

๋ชฉ๋ก ๋ณด๊ธฐ
12/15
post-thumbnail

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>
profile
๐Ÿƒ๐Ÿฝ ๋™์ ์ธ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€

Powered by GraphCDN, the GraphQL CDN