React 항목의 네 번째 글머리 기호 - 데이터 바인딩 및 양식 처리

머리말

저번 글에서는 반응형에서 stateful 컴포넌트와 이벤트 처리에 대해 이야기했는데, 오늘은 새로운 지식 포인트가 많이 포함되는 작은 프로젝트인 form submit을 소개해 드리겠습니다. 함께 배워봅시다~

양식 요소

이와 같은 양식 요소 <input>、<textarea>、<option>는 사용자 상호 작용을 통해 변경될 수 있으므로 다른 요소와 다릅니다. 이러한 요소에서 제공하는 인터페이스를 사용하면 사용자 상호 작용에 대한 응답으로 양식 데이터를 더 쉽게 처리할 수 있습니다.

• Interaction 속성은 사용자가 다음 요소와 상호 작용할 때 onChange 콜백 함수를 사용하여 구성 요소 변경 사항을 모니터링하는 데 사용됩니다. 양식 요소는 사용자 상호 작용의 영향을 받는 여러 속성을 지원합니다.
  • 값이 사용됩니다<input>、<textarea>
  • 확인<checkbox>、<radio>
  • 에 대해 선정<option>

제한된 구성 요소 및 제한되지 않은 구성 요소

• 제한된 구성 요소
  값 집합 <input>은 제한된 구성 요소입니다. 제한 <input>의 경우 렌더링된 HTML 요소는 항상 값 속성 값을 유지합니다. 이때 사용자는 렌더링된 구성 요소에 아무 값이나 입력하면 작동하지 않습니다.

  return <input type='text' value='hello' />
  
  return <textarea name="description" value="demo" />
  

• Unrestricted Component
  값이 설정되지 않은(또는 null로 설정된) <input>구성 요소는 무제한 구성 요소입니다. 무제한 <input>구성 요소의 경우 렌더링된 요소는 사용자 입력을 직접 반영합니다.

  return <input type='text' />
  

  위는 비어있는 값 입력창으로 비어있지 않은 초기값을 설정하고 싶다면 defaultValue 속성을 사용하면 됩니다.

  return <input type="text" defaultValue="Hello" />
  

  위의 코드로 렌더링된 요소는 제한된 컴포넌트와 같은 초기값을 가지지만 이 값은 사용자가 변경할 수 있으며 인터페이스에 반영됩니다.
  유형 radio、checked은 inputdefaultChecked 속성을 <select>지원하고 defaultValue 속성을 지원합니다.

  <input type='radio' name='sex' defaultChecked />1
  <input type='radio' name='sex' />2
  <select defaultValue="C">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  

  <select>selected 속성은 일반적으로 HTML <option>에서 선택된 상태를 설정하는 데 사용되며, React는 컴포넌트를 보다 편리하게 제어하기 위해 값 대신 값을 사용하며, 제한이 없는 컴포넌트인 경우에는 defaultValue를 사용합니다.
  배열을 value 속성에 전달하면 여러 옵션을 선택할 수 있습니다.<select multiple={true} value={['B', 'C']}></select>

공통 양식 데이터 바인딩

위의 학습을 통해 우리는 일반적으로 사용되는 폼 데이터의 바인딩을 마스터할 수 있었고 다음으로 다룰 것은 양방향 데이터 바인딩을 폼에 캡슐화하는 이벤트 메서드입니다.
기존 지식 포인트를 통해 양식 데이터에 양방향 데이터 바인딩을 수행하려면 해당 이벤트 기능을 설정해야 한다는 것을 알고 있습니다.

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

하지만 우리 폼의 데이터 중 하나만 양방향 데이터 바인딩이 필요한 것은 불가능하므로 이 함수를 재사용하는 것이 가장 좋은 방법입니다.이 함수를 캡슐화할 때 동적 이름 값을 전달하는 것을 고려해야 합니다. 설정하므로 다음과 같이 함수를 캡슐화해야 합니다.

handleChange = (e) => {
    
    
  // 这里要注意我们一定要用[]进行包裹,因为这里我们拿到的name是一个字符串
  let name = e.target.name
  // this.setState({ [name]: e.target.value })
  this.setState({
    
     [e.target.name]: e.target.value })
}

등록 기능 구현

등록 기능에서는 양방향 데이터 바인딩 및 검증을 고려해야 하므로 등록 기능을 구현할 때 기존 양방향 데이터 바인딩 기능에 일반 일치 확인 기능과 오류 메시지를 통합해야 합니다. 이 같은:

// 姓名校验处理
nameChange = (e) => {
    
    
  let rule = /^[a-zA-Z0-9_-]{4,10}$/
  let value = e.target.value
  let error = ''
  if(!value) {
    
    
    error = '请输入昵称'
  } else if (!rule.test(value)) {
    
    
    error = '请输入4-10位昵称'
  } else {
    
    
    error = ''
  }
  this.setState({
    
    
    name: value,
    nameError: error
  })
}

<label>昵称：
  <input type="text" name="name" 
  value={
    
    name} onChange={
    
    this.nameChange}/>
  <span className="danger">{
    
    nameError}</span>
</label>

이렇게 하면 닉네임 인증을 실감할 수 있는데 비밀번호, 휴대폰 번호 등 아직 폼에 인증이 많이 남아있는데 어떻게 하면 될까요?