React의 제어 양식

제어된 양식은 React를 사용할 때 코드를 작성하는 데 중요한 부분입니다. 그래서 나는 읽었다. 여러 번 React docs . 내 강사가 제어된 양식의 모든 부분이 나를 위해 클릭된 다소 어리석은 예를 제공하기 전까지는 아니었습니다.

웹 사이트의 다른 페이지에 액세스하기 위해 사용자 이름을 입력할 수 있는 로그인 구성 요소가 있다고 가정해 보겠습니다.

import React, { Component } from 'react'

export default class Login extends Component {

  render() {
    return (
      <>
        <h1>Enter Your Username</h1>
        <form>
          <label>
            Username: 
            <input type='text' name='username' />
          </label>
          <input type='submit' value='submit' />
        </form>
      </>
    )
  }
}

제기된 질문은 DOM에서 보는 입력을 어떻게 사용하고 사용자 입력이 "React-y"방식으로 작동하도록 만들 수 있는지, 더 공식적으로는 React에 사랑받는 단일 진실 소스를 제공하는 것입니다. 이를 위해 우리는 키 입력을 추적하고 변경을 감지할 때 전달되는 함수를 실행하는 것을 알고 있는 React에서 제공한 jsx 속성 "onChange"를 사용합니다. 그래서 우리는 그것을 jsx의 입력에 추가합니다.

   <input type='text' name='username' onChange={this.onChange} />

그런 다음 내부 상태를 추적하기 위해 Login 클래스가 필요하므로 이를 기본 값인 빈 문자열로 클래스 맨 위에 추가합니다.

state = {
 username: '',
}

사용자 입력으로 상태를 업데이트하는 onChange 함수도 있습니다.

 onChange = (e) => {
  this.setState({username: e.target.value})
}

이제 우리가

console.log(this.state.username)

리턴 내부에서 새로운 키가 입력에 입력될 때마다 상태가 변경되는 것을 볼 수 있습니다.

(참고: 양식에 여러 필드를 추가해야 합니까? 여러 입력에 대해 onChange 메서드를 재사용하려면 이 트릭을 구조화와 함께 사용하십시오.) ->

 onChange = (e) => {
    const {name, value} = e.target
    this.setState({[name]: value})
  }

그러나 이것은 아직 통제된 형태가 아닙니다. DOM에 렌더링한 것이 반드시 상태에 있는 것은 아니기 때문에 제어되지 않습니다. 혼란스러운? 나는 ~였다. 이제 onChange 함수를 약간 변경해 보겠습니다.

 onChange = (e) => {
     let {name, value} = e.target
     value = value.split('').filter(char => char !=='e').join('')
     this.setState({[name]: value})
   }

이것이 하는 일은 입력할 때마다 소문자 '''를 걸러내는 것입니다. 이것을 구현하고 상태를 콘솔에 기록하는 경우 더 이상 동일하지 않습니다! 입력에서 "Merry Gentlemen"을 볼 수 있지만 console.log 상태에서는 "Mrry Gntlmn"으로 등록됩니다. 좋아...그래서 이것은 다소 인위적이지만 사용자의 입력과 업데이트 상태가 어떻게 다른지 알게되었습니다. 이는 사용자 입력의 소스가 React가 아니라 DOM 자체이기 때문입니다.

이를 해결하기 위해 입력에 값 속성을 추가하고 상태와 동일하게 설정합니다.

<input type='text' name='username' onChange={this.onChange} value={this.state.username} />

이제 사용자 이름 필드에 입력을 입력하면 console.logged와 일치하는 사용자 "Mrry Gntlmn"이 표시됩니다. 값을 설정하는 것은 이 형식을 제어되지 않는 상태에서 제어되는 상태로 바꾸는 데 매우 중요한 부분입니다. 왜 React와 개발자인 우리는 제어된 형식에 그렇게 많은 관심을 가집니까? React는 백그라운드에서 필요에 따라 요소를 다시 렌더링할 만큼 강력하며 사용자가 제출되기 전에 갑자기 입력을 잃어버리는 것을 원하지 않습니다. 사용자가 입력을 제출하기 전에 유효성 검사에 사용할 수도 있습니다. 그러나 개발의 많은 영역과 마찬가지로 항상 필요한 것은 아니지만 뒷주머니에 넣어두는 것은 좋은 습관이자 귀중한 기술입니다.

축하해요! 이제 키가 작동하지 않는다는 사실을 친구에게 알릴 수 있습니다. 그런 다음 반응 기술을 사용하여 상태를 입력으로 렌더링하고 있다고 설명합니다.

즐거운 코딩!

최종 파일:

import React, { Component } from 'react'

export default class Login extends Component {

  state = {
    username: ''
  }

  onChange = (e) => {
    const {name, value} = e.target
    this.setState({[name]: value})
  }

  //silly onChange example
  // onChange = (e) => {
  //   let {name, value} = e.target
  //   value = value.split('').filter(char => char !=='e').join('')
  //   this.setState({[name]: value})
  // }

  render() {
    console.log(this.state.username)
    return (
      <>
        <h1>ADD YOURSELF TO THE HALL OF PET MEMES</h1>
        <form>
          <label>
            Username: 
            <input type='text' name='username' onChange={this.onChange} value={this.state.username} />
          </label>
          <input type='submit' value='submit' />
        </form>
      </>
    )
  }
}