[React] Form (8)

HTML

<form>
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

- <input name="name"> </input> 태그로 name을 입력받음

 

JS

- 제어 컴포넌트 사용

 

제어 컴포넌트

- JS 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록

- 변경값은 state에 유지되며 setState()에 의해 업데이트 됨

class NameForm extends React.Component {
  constructor(props) { // 생성자
    super(props);
    this.state = {value: ''}; // 빈칸으로 초기화
    this.handleChange = this.handleChange.bind(this); // 바인딩
    this.handleSubmit = this.handleSubmit.bind(this); // 바인딩
  }
  // event 값이 변경되면 value의 state 값을 사용자 입력값으로 변경
  handleChange(event) {    this.setState({value: event.target.value});  }
  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}> // handleSubmit 함수 실행       
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />        
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

 

select 태그

- 드롭 다운 목록

 

HTML

<select>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

JS

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'}; // coconut을 기본값으로 설정

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.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>
    );
  }
}

- multiple 옵션 : 다중 선택 -> value에 배열 전달 

<select multiple={true} value={['B', 'C']}>

 

file input 태그

- 자신의 저장소에서 서버로 파일 업로드

<input type="file" />

- 읽기 전용 -> 비제어 컴포넌트

 

다중 입력 제어하기

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2 // 맨처음 값을 2로 초기화
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    // 입력값의 type이 checkbox라면 checked 변수 데이터를 value에 담음
    // 입력값의 type이 checkbox가 아니라면 value 변수 데이터를 value에 담음
    const value = target.type === 'checkbox' ? target.checked : target.value;
    // isGoing 혹은 numberOfGuests
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          // type : checkbox -----------------------------------
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          // type : number -----------------------------------
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}