어떻게 상호작용 표를 만듭니까

웹 응용 프로그램에 접근하는 사용자의 마음속에는 그들이 실현하고자 하는 특정한 목표가 있습니다.표는 사용자가 주문서, 디렉터리 요청, 심지어 조회와 같은 정보를 연락하고 발송할 수 있도록 하는 매개체이다. 이런 정보는 다른 절차에 전달된다.
뚜렷하고 지능적인 좋은 폼 디자인은 사용자가 그들의 목표를 신속하게 실현하도록 도와줄 수 있다.반면 디자인이 엉망인 폼은 혼란을 초래하고 사용자와 응용 프로그램의 상호작용을 막을 수도 있다.
따라서, 우리는 좋은 폼이 당신의 응용 프로그램에 유리하고 사용자를 만족시킬 수 있다는 것에 동의합니다.그러나 좋은 폼의 수요를 실현하려면 반응을 하기 어려울 것 같다. 동적 폼, 실시간 응답 피드백, 그리고 좋은 사용자 체험을 만드는 것이다.우리는 어떻게 components, states와 props의 토지에서 이러한 요구를 만족시킬 수 있습니까?
우리가 얻을 수 있는 첫 번째 힌트는 당연히 표에 관한 React 문서이다.

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

// ...

<input
  onChange={this.handleChange}
  value={this.state.value}
/>

이것은 기본적으로 React 양식 문서의 요약입니다.이것은 단지 React가 사용자가 클릭하거나 키를 눌렀을 때 사용해야 할 방식을 알려줄 뿐이다.React는 사용자의 값을 state로 설정한 다음 이 상태를 입력 값으로 사용합니다.끝났어.
응?이렇게?
네.복잡한 업무 논리를 가진 응용 프로그램을 위해 폼을 구축할 때 직면하게 될 다른 문제들그래, 네가 결정해라.즐겨하다

검증

오류 표시

추적 양식 필드

커밋 처리

문서에서 읽은 바와 같이 React는 프로젝트를 구축하고 라이브러리 창고를 선택하는 방법에 대해 매우 무관심합니다.이것 또한 그것이 단지 폼 구성 요소를 만드는 기본적인 필요성을 제공했을 뿐이라는 것을 의미한다.component,state,props퍼즐처럼 우리는 스스로 그것들을 조합해야 한다.
이 자습서의 최종 제품은 다음과 같습니다.
React를 사용하여 양식을 만들 때는 다음 세 가지 기본 원칙을 기억해야 합니다.

component 폼 요소를 나타내는 데 사용되며 보통 JSX 요소

state 사용자 입력 추적용

props 데이터를 JSX 요소에 전달하는 데 사용

네가 어떤 형식을 창조하려고 하든지 간에, 이 세 가지 기본 원칙을 기억하기만 한다면, 너는 괜찮을 것이다.

기본 반응 형식
React의 모든 내용은 하나의 구성 요소입니다. 폼을 포함하고, Reactstate는 입력 값을 추적하는 데 사용됩니다.다음은 React로 작성된 예제 양식입니다.

class BasicForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name:'',
      email: '',
    };
  }

  handleNameChange = (event) => {
    this.setState({name: event.target.value});
  }

  handleEmailChange = (event) => {
    this.setState({email: event.target.value});
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { name, email } = this.state
    alert(`Your state values: \n 
            name: ${name} \n 
            email: ${email}`)
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Name</label>
          <input name="name" className="form-control" id="name" placeholder="Enter name" value={this.state.name} onChange={this.handleNameChange} />
        </div>
        <div className="form-group">
          <label htmlFor="email">Email</label>
          <input name="email" className="form-control" id="email" placeholder="Enter email" value={this.state.email} onChange={this.handleEmailChange} />
        </div>
        <button type="submit" className="btn btn-success btn-block">Submit</button>
      </form>
    );
  }
}

와!이 코드는 무엇을 합니까?
걱정하지 마, 코드가 사람을 물지 않을 거야!이제 설명해 드릴게요.
우리는 state부터 시작할 것이다.react 폼은 필드 값의 유일한 진가 원본으로 state 를 사용합니다.이것은 표input의 각component 요소가 state 값으로 그 값을 한다는 것을 의미한다.

this.state = {
  name:'',
  email: '',
};   

그리고 상태 값을 input 표시valueprop에 분배합니다.입력 값을 변경할 때마다 실행되는 onChangeprop도 추가했습니다.마지막으로, 우리는 onSubmit 도구를 폼 구성 요소에 추가하여 제출을 처리하는 데 사용합니다.

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input name="name" className="form-control" id="name" placeholder="Enter name" 
        // value and onChange prop
          value={this.state.name} 
          onChange={this.handleNameChange} />
      </div>
      <div className="form-group">
        <label htmlFor="email">Email</label>
        <input name="email" className="form-control" id="email" placeholder="Enter email" 
        // value and onChange prop
          value={this.state.email} 
          onChange={this.handleEmailChange} />
      </div>
      <button type="submit" className="btn btn-success btn-block">Submit</button>
    </form>
  );
}    

다음에 우리는 handleChange 방법을 추가할 수 있는데 이 방법은 event 파라미터를 받아들일 수 있다.이 이벤트 대상은 우리의 입력 이름과 값을 저장할 것입니다.

handleNameChange = (event) => {
  this.setState({name: event.target.value});
}

handleEmailChange = (event) => {
  this.setState({email: event.target.value});
}

표 구조의 마지막 부분은submit handler 방법이다.이 예에서 우리는 handleSubmit 방법을 사용했는데, 이 방법은 경보 상자를 호출하면 상태 값을 출력할 수 있다.

handleSubmit = (event) => {
  event.preventDefault();
  const { name, email } = this.state
  alert(`Your state values: \n 
          name: ${name} \n 
          email: ${email}`)
} 

일반적인 HTML 양식과 마찬가지로 데이터를 저장하거나 전송하는 작업을 수행하고 처리하는 곳입니다.JavaScript 코드를 사용하여 커밋을 처리하므로 커밋 방법에 event.preventDefault()를 추가해야 합니다.브라우저의 JavaScript 탐지기가 수신 양식으로 이벤트를 전송하도록 설정되어 있기 때문에 일반적으로 이 이벤트는 페이지를 다시 로드하도록 트리거합니다.이 preventDefault 를 사용하면 브라우저에 기본 방법을 사용하지 말라고 알려 줍니다.이렇게 하면 페이지를 다시 불러오는 것이 멈추고 제출 방법이 실행될 수 있습니다.

검증을 진행하다
데이터를 검증하는 전통적인 방법은 폼을 제출하고 서버가 검증을 마칠 때까지 기다린 다음에 웹 페이지가 새로 고쳐지고 오류 메시지가 표시됩니다.이 과정은 사용자에게 시간과 번거로움을 소모한다.
React는 전방 라이브러리이기 때문에, 폼 구성 요소에 실시간 검증을 구축해서 이 문제를 해결할 수 있습니다.사실 이것은 React 응용 프로그램에서 흔히 볼 수 있는 모델로 내가 보기에 매우 좋다.
React는 모든 폼 데이터를 상태에 저장하기 때문에 render 이전에 검사를 할 수 있습니다. 데이터가 잘못되면 오류 메시지를 표시할 수 있습니다.예를 들어, 이름 길이가 3자 이상인지 확인하려면 다음을 사용할 수 있습니다.

render(){
  const isValidName = this.state.name.length > 3
  const isValidEmail = this.state.email.length > 3
}

그런 다음 컨텍스트에 배치합니다.

// the render method

render() {
  const isValidName = this.state.name.length > 3;
  const isValidEmail = this.state.email.length > 3;
  return (
    <form onSubmit={this.handleSubmit}>
      <div className="form-group">
        <label htmlFor="name">Name</label>
        <input
          name="name"
          className={`form-control ${ isValidName? '':'is-invalid' }`}
          id="name"
          placeholder="Enter name"
          value={this.state.name}
          onChange={this.handleNameChange}
        />
        {/*feedback here*/}
      { isValidName? null: <div className='invalid-feedback'>Name must be longer than 3 characters</div> }
      </div>
      <div className="form-group">

        {/*after email input*/}
      { isValidEmail? null: <div className='invalid-feedback'>Email must be longer than 3 characters</div> }
      </div>
      <button type="submit" className="btn btn-success btn-block">
        Submit
      </button>
    </form>
  );
}

폼은 즉시 검증되며, 이름이 3글자를 넘으면 오류 메시지가 사라집니다.그러나 이런 검증이 가장 좋은 것은 아니다. 왜냐하면 우리는 검증 논리를 렌더 방법에 두기 때문이다. 우리가 대량의 데이터를 검증할 때 렌더 방법은 곧 이 방법을 스파게티 국수로 바꿀 것이다.심지어 우리가 텍스트 상자를 사용하기 전에도 실행될 것이다.그것은 좋지 않다.

상태를 사용하여 버그 체크
우리가 상태를 사용하여 데이터를 입력하는 것과 같이, 우리도 상태를 사용하여 검증할 수 있다.상태 초기화에 새 상태 속성을 추가합니다.

this.state = {
  name: '',
  email: '',
  nameError: '',
  emailError: ''
}

formError 상태는 오류 메시지를 유지합니다. 오류 메시지를 표시하기 위해 사용할 것입니다.새 유효성 검사 함수를 작성하여 컨텍스트에 배치합니다.

handleNameChange = event => {
  this.setState({ name: event.target.value }, () => {
    this.validateName();
  });
};

handleEmailChange = event => {
  this.setState({ email: event.target.value }, () => {
    this.validateEmail();
  });
};

validateName = () => {
  const { name } = this.state;
  this.setState({
    nameError:
      name.length > 3 ? null : 'Name must be longer than 3 characters'
  });
}

validateEmail = () => {
  const { email } = this.state;
  this.setState({
    emailError:
      email.length > 3 ? null : 'Email must be longer than 3 characters'
  });
}

이렇게 하면 사용자가 입력에 내용을 입력할 때만 검증 방법이 실행됩니다.현재 우리가 해야 할 마지막 일은 사용자가 텍스트 상자를 눌렀을 때 검증을 실행한 다음 다른 텍스트 상자를 눌렀을 때 아무런 조작도 하지 않고 이동하는 것이다.

onBlur 추가
입력 요소에 onBlur 아이템을 추가합니다.

<input
  name='name'
  // className, id, onChange ...
  onBlur={this.validateName}
/>

<input
  name='email'
  // className, id, onChange ...
  onBlur={this.validateEmail}
/>

현재, 검증 방법은 사용자가 터치한 해당 texbox에서 실행되고 오류 메시지를 표시합니다.
다음은 데모입니다.

결론
이제 우리가 이 간단한 예에서 배운 것을 총결해 볼 때가 되었다.React form의 세 가지 기본 원칙을 다시 한번 반복해 보겠습니다.

component 폼 요소를 나타내는 데 사용되며 보통 JSX 요소

state 사용자 입력 추적용

props 데이터를 JSX 요소에 전달하는 데 사용

우리는 이것이 오랫동안 시련을 겪은 진실한 반응 형식의 원칙이라는 것을 이미 보았다.우리는 이미 component를 작성하여 우리의 JSX 표를 보여 주었다.우리는 state를 사용하여 name와 email의 값을 추적하고props를 사용하여 데이터를 상태값에서 입력값으로 전달한다. handleChange 함수를 onChangeprops로 전달하는 것을 포함한다.
React에서 데이터를 처리하는 방식에 익숙하지 않은 사람들에게 React에서 폼을 생성하는 것은 상당히 복잡한 작업이다.React 폼에 대한 고급 안내서가 필요하시면, Arnich의high quality React form tutorials 를 보십시오.그것은 너를 도와 많은 시간을 절약할 수 있다.
읽어주셔서 감사합니다!만약 네가 이런 문장을 좋아한다면 반드시 나를 따라와야 한다.나는 곧 더 많은 React에 관한 강좌를 쓸 것이다.