개요 및 텍스트 입력

반응에서 양식 입력은 일반적으로 구성 요소에 의해 처리되는 반면 HTML에서는 DOM에 의해 처리됩니다.

기본적으로 HTML 양식은 다음과 같이 간단할 수 있습니다.

<form>
  <p>Name:</p>
  <input type="text"/>
</form>

기본적으로 이 양식은 새 페이지로 이동합니다. 그러나 대부분의 경우 양식 제출을 처리하는 스크립트가 있으며 제출된 값에 액세스할 수 있습니다.

이제 사용자가 입력하는 내용을 보여줌으로써 사용자가 제출한 내용을 보여주고 싶다고 가정해 보겠습니다. 먼저 양식을 새 구성 요소로 변환하여 이를 수행할 수 있습니다.

class App extends React.component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <form>
        <p>Name</p>
        <input type="text"/>
      </form>
    )
  }
}

그런 다음 상태를 정의하고 onChange 핸들러를 추가하여 이름 값을 가져와 나중에 표시할 수 있도록 해야 합니다.

class App extends React.component {
  constructor(props) {
    super(props)
    this.state = { name: '' }
  }
  render() {
    return (
      <form>
        <p>Name:</p>
        <input type="text"
          onChange={(e) => this.setState({ name: e.target.value }) }/>
      </form>
    )
  }
}

이제 render 메서드에 넣어 현재 상태를 볼 수 있습니다. 마지막으로 현재 상태 값을 입력에 입력하여 첫 번째 로드에서 입력이 비어 있지 않도록 할 수 있습니다.

<form>
  { JSON.stringify(this.state) }
  <p>Name</p>
  <input type="text"
    value={ this.state.name }
    onChange={(e) => this.setState({ name: e.target.value })} 
  />
</form>

이제 다음과 같아야 합니다.

기타 입력 유형(숫자, 라디오, 선택 옵션, 체크박스)

다른 입력 유형의 경우 각 입력에 대해 더 많은 변수를 추가해야 합니다.

this.state = {
  name: '',
  age: 10, // for number
  gender: 'none', // for radio
  occupation: 'none', // for select-option
  isCool: false // for checkbox
}

숫자 입력의 경우 텍스트 입력과 유사하며 이름 입력 아래에 추가할 수 있습니다.

<p>Age:</p>
<input type="number" value={ this.state.age }
  onChange= { e => { this.setState({ age: Number(e.target.value) })}}
  ></input>

이제 라디오 입력을 사용하면 checked 라는 추가 속성이 필요하며 부울 또는 참/거짓 값을 수락하여 라디오 버튼이 선택(선택)되었는지 여부를 결정합니다.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>

대부분의 경우 발생하는 여러 라디오 버튼을 원하는 경우 value , checked 및 onChange 속성에서 다른 값으로 입력 태그를 복제할 수 있습니다.

<p>Gender:</p>
<input type="radio" name="gender" value="male"
  checked={ this.state.gender === 'male' }
  onChange={ e => { this.setState({ gender: 'male' }) }}
  />
<label>Male</label>
<input type="radio" name="gender" value="female"
  checked={ this.state.gender === 'female' }
  onChange={ e => { this.setState({ gender: 'female' }) }}
  />
<label>Female</label>

선택 옵션의 경우 각 옵션은 평소와 같이 해당 값을 갖지만 처음에 값을 선택하려면 value 속성과 함께 루트 선택 태그에 onChange 속성을 넣을 수 있습니다.

<p>Occupation:</p>
<select name="occupation" value={ this.state.occupation } onChange={ e => this.setState({ occupation: e.target.value })}>
  <option value="">-- SELECT --</option>
  <option value="Frontend">Frontend</option>
  <option value="Backend">Backend</option>
  <option value="Full Stack">Full Stack</option>
</select>

마지막으로 체크박스 입력을 위해 checked 및 onChange 속성을 추가할 수 있습니다.

<p>Are you cool?</p>
<input type="checkbox" checked={ this.state.isCool } onChange={ e => this.setState({ isCool: e.target.checked })}/>
<label>Of course I'm cool!</label>

이제 스크립트의 모든 입력에 액세스할 수 있으며 다음과 같아야 합니다.



자세한 내용은 다음을 참조하십시오.
https://reactjs.org/docs/forms.html