React - Mobx 유효성 입력 필드

Question

입력 필드에서 MOBX 유효성 검사를 검색했지만 아무 것도 찾을 수 없으며 양식이 필요한 "MobX 입력"을 발견했지만 양식이 없습니다. 내가 찾은 또 다른 하나는 형식을 다시 사용하는 ValidatorJs와 "mobx-react-form"이었습니다. 어떤 힌트 나 예제라도 감사 할 것입니다. 단순한 입력 필드에서 사용할 수 있기를 원합니다.

<Input placeholder="FirstName" type="text" 
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} /> 

Answer 1

MobX를 사용하면 간단한 검증을 매우 쉽게 할 수 있습니다. 이와 같은 단일 필드의 경우 함수를 확인하는 간단한 방법은 다음과 같습니다.

구성 요소에 입력이 제출 된 경우에만 표시되는 오류 필드가 있습니다 (버튼 푸시 또는 관찰 클래스 (나는 비 장식 스타일을 사용)에서 무엇이든)

return <div> 
<input placeholder="FirstName" type="text" 
defaultValue={Contact.FirstName} onChange={(e) => handler(e)} /> 
{submitted && <span className="error-message">{Contact.FirstNameError}</span>} 
</div>; 

, 우리는 관찰로 필드를 정의하고, 계산 된 값과 같은 오류 메시지 클래스입니다.

class Contact { 
    constructor() { 
    extendObservable({ 
     submitted: false, 
     FirstName: observable(), 
     FirstNameError: computed(() => { 
      if(this.FirstName.length < 10) { 
      return 'First name must be at least 10 characters long'; 
      } 
      // further validation here 
      return undefined; 
     }) 
    }) 
    } 

} 

당신은 쉽게 단지 FirstNameError에 값이 있는지 여부를 확인합니다 추가 hasError 계산 된 값을 추가 할 수 있습니다.

이 방법은 몇 개의 입력으로 확장됩니다. 무리가있는 경우 타사 라이브러리 또는 검증을 관리하기 위해 직접 작성하는 것과 같은 추상화를 조사하고 싶을 것입니다. 작은 구성을 기반으로 필요한 계산 된 속성을 생성하는 함수를 작성할 수 있습니다.