[React] 9. 폼

출처: React 공식 홈페이지

폼 – React (reactjs.org)

 

 

1. 제어 컴포넌트

> 사용자의 입력을 기반으로 자신의 state 변수와 연동해 관리하고 업데이트한다.
> 아래는 input을 입력할 때마다 onChange 의 handleChange 함수에 의해 state가 변하고 value값을 업데이트해서 다시 렌더링한다.
예시)

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

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

  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}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm/>,
  document.getElementById('root')
);

 

 

2. textarea 태그 예시

> 동일하게 Onchange의 handleChange를 이용
예시)

class EssayForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'Please write an essay about your favorite DOM element.'
    };

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

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

  handleSubmit(event) {
    alert('An essay was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Essay:
          <textarea value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <EssayForm/>,
  document.getElementById('root')
);

 

3. select 태그 예시

> 동일하게 Onchange의 handleChange를 이용

class FlavorForm extends React.Component{
  constructor(props){
    super(props);
    this.state = {value: '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.vaalue} 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>
    )
  }
}

ReactDOM.render(
  <FlavorForm/>,
  document.getElementById('root')
);

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

 

 

4. file input 태그

 <input type="file">
 > 읽기 전용 값이기 때문에 제어할 수 없다.

 

 

5. 다중 입력 제어하기

> input 이 여러개일때, name 속성을 추가해 컨트롤한다.
> 내가 조금 커스텀했다. input에 키를 아무거나 누르면 1씩 증가하고 흰색배경을 클릭하면 value가 업데이트된다.
> (왜 실시간 value가 업데이트 안되는지... 잘 모르겠다) 

 

예시)

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

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

  handleInputChange(event) {
    const target = event.target;
    const name = target.name;

    if(target.type === 'checkbox'){      
      this.setState({
        [name]: !this.state.isGoing
      });
    }else{      
      this.setState({
        [name]: this.state.numberOfGuests + 1
      });
    }

  }

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


ReactDOM.render(
  <Reservation/>,
  document.getElementById('root')
);

참고)
ES6 문법
this.setState({
  [name]: value
});

ES5 문법
var partialState = {};
partialState[name] = value;
this.setState(partialState);

 

** 태그의 value 속성이 있고 state와 연동했음에도 불구하고 여전히 수정할 수 있다면
실수로 value에 undefined 혹은 null 값을 할당하진 않았는지 확인해 보는것이 좋다.

 

 

6. 제어컴포넌트를 사용하기 싫다면

비제어 컴포넌트 문서와 Fomik 등의 활용을 고려해 볼 수 있다.