Forms

= 양식

Controlled Component

• 모든 데이터를 state에서 관리

<input> <textarea>

<select > <option>..</select>

<select multiple={true}> 로 복수 선택 사용가능

<input type="file">

• Uncontrolled Component (읽기전용)

---

이름 & 성별 입력하기

class SignUp extends React.Component{ Signup을 react의 class 형태로 만든다.
  constructor(props){                 constructor에서는 state를 정의
    super(props);
    this.state={
      name:'',
			gender:1,
    }
  }
  handleChange = (event)=>{         새로 들어온 입력값을 setState로 저장
    this.setState({
      [event.target.name]: event.target.value
    })
  }
  render(){
    var {name} = this.state;
    return (
      <form onSubmit={this.handleChange}>
        <label>
          name
          <input 
            type="text"
            name={'name'}
            value={name}
            onChange={this.handleChange}/>
        </label>

				<label>
          gender
          <select
            name={'gender'}
            value={gender}
            onChange={this.handleChange}>
            <option value={1}>MAN</option>
            <option value={0}>WOMAN</option>
          </select>
        </label>
        <input type="submit" value="Submit"/>
      </form>
    )
  }
}
export default SignUp