우리는 모두 표 값, 검증, 관심, 제출을 관리하는 것이 좀 지루하고 고통스럽다는 것을 안다.그러나 만약에 우리가 표 관리 내용을 하나의 가방에 집중할 수 있다면 이것은 개발자로 하여금 이보다 더 중요한 것을 생각하고 개발하게 할 수 있을 것이다.

Don't reapeat yourself is a thing, There are many plugins available at ease, But...

내가 이전에 본 플러그인은 더 많은react를 향한 것이지,react의 원생이 아니다.formik와 같이 로컬 반응을 위한 특정한 귀속기가 없습니다. 마찬가지로 모든 값이나 hndling 함수를 제시해야 합니다. 마찬가지로 코드의 초점을 관리해야 합니다.

A용액-반응형태R

이제 react-formr 가방 하나는reactnative를 위한 것입니다.

특징

주어진 규칙(정규 표현식) 또는 미리 정의된 유형(이메일, 전화 등)의 폼 검증.

입력 플러그인 기능은 폼 처리에 필요한 거의 모든 것을 포함한다TextInput.

반환 키를 누르면 다음 입력에 자동으로 초점을 맞추고 마지막 입력 반환 키를 누르면 촉발onFocuseFinish.

모호 검증 및 잘못된 입력 변경 사항을 입력할 때 검증합니다.

사용onChange 아이템 듣기 형식의 실시간 변화.

타자기로 쓰기

Text Input에 국한되지 않으며handle value change & values 대상과 함께 사용할 수 있습니다.

Update: useFormr hook is available now, no need to wrap the form with Formr component anymore.

사용합시다.

우선 설치yarn add react-formr 또는 npm install react-formrreact-formr

크다

표,formr에서 사용할 수 있는 모든 옵션을 포함합니다

// Formr form manager wrapper
<Former 
    onChange={(values)=>{
            // Triggers if any value change in form
            console.log(values)
        }}
    onFinishFocus={(values)=>{
        // Triggers all form fields finished focusing
            console.log(values)
        }}
    formFields={{ password: "" }} //Initial value can be added here
        validation={{
          password: {
            required: true,
            rules:
              "0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$",
          }
        }} >
        {// Provides a function to render form inputs }
        {({
          inputBinder, // Package of TextInput props
          onChangeHandler, // included in inputBinder
          values, // included in inputBinder
          onBlurHandler,// included in inputBinder
          onSubmitHandler,
          onSubmitEditingHandler,
          refsHandler,// included in inputBinder
          touched,// included in inputBinder if you are making custom input component with this props
          valid,// included in inputBinder if you are making custom input component with this props
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <TextInput
                  style={{
                    borderColor:
                      valid.email != null && touched.email && !valid.email
                        ? "red"
                        : "black",
                    ...styles.input,
                  }}
                  value={values.password}
                  ref={(ref)=>refsHandler('password',ref)}
                  onBlur={()  =>  onBlurHandler('password')}
                  onChangeText={text=>onChangeHandler('password',text)}
                    onSubmitEditing={()=>onSubmitEditingHandler('password')} 
                />
                <Button onPress={()=>onSubmitHandler(value=>submitIt(value))} />
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

짧은 버전

Formr의 inputBinder 함수만 사용

<Former formFields={{ password: "" }}
        validation={{
          password: {
            required: true,
            rules:
              "0-9])(?=.*[a-z].*[a-z].*[a-z]).{8}$",
          }
        }} >

        {({
          inputBinder, 
          onSubmitHandler,
          touched,
          valid
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <TextInput
                  style={{
                    borderColor:
                      valid.email != null && touched.email && !valid.email
                        ? "red"
                        : "black",
                    ...styles.input,
                  }}
                  {...inputBinder("email")} // THIS IS WHERE THE DIFFERENCE COMES
                />
                <Button 
                   onPress={()=>onSubmitHandler(value=>submitIt(value))} 
/>
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

내 최단 버전

가장 짧고 간단한 버전은 사용자 정의 입력 구성 요소를 만들고 오류를 처리하는 것입니다.

오류 메시지가 있는 CustomInput 구성 요소

const CustomInput = ({valid,value,touched,errorMsg,...rest})=>{
    const showError = value!=="" && valid && touched;
    return(
    <View>
        <TextInput 
            {...rest} 
            value={value} 
            style={
            borderWidth:1,
            borderColor:showError?"red":"gray",
            ...rest.style} 
        />
        {showError && <Text style={color:"red"} >{errorMsg}</Text>}
    </View>)    
}

CustomInput이 있는 Formr 양식

<Former formFields={{ email: "" }}
        validation={{
          password: {
            required: true,
            type:"email"
          }
        }} >
        {({
          inputBinder, // Package of TextInput props.
          onSubmitHandler, // For submitting form.
        }) => {
          return (
            <View
              style={{
                flex: 1,
                marginTop: 50,
              }}>
                <CustomInput 
                    {...inputBinder("email")} 
                    errorMessage="Something is wrong here" 
                 />
                <Button onPress={()=>onSubmitHandler(value=>submitThis(value))} />
              </View>
             )//end of return
           }// end of formr function
       }
</Formr>

이거 쉽지 않아요??

걸출한 인물

입력 클립

이 기능은 입력 관리 폼을 사용하는 거의 모든 내용을 포함합니다. - TextInput, value, onChangeText, onBlur, ref 및 onSubmitEditing & valid 입니다. 이 도구를 사용하면 사용자 정의 입력 구성 요소를 만들 수 있습니다.

감동적

일반적인 유형이나 정규 표현식 규칙을 미리 정의한 객체를 사용하여 검증할 수 있으며, 여기에서 필수 필드를 언급할 수도 있습니다. 입력에 규칙을 제공하는 옵션은 정규 표현식의 제한을 받지 않습니다.

자동 초점 입력

reactform 플러그인과 달리,reactnative를 위한 것이기 때문에, 다음 입력의 초점을 쉽게 처리할 수 있습니다. (또는 요소는ref&handles 초점을 가지고 있습니다.)다음 주제에서 더 많은 정보를 알아보겠습니다.

FAQ 및 솔루션

ref를 사용하여 다음 입력에 자동으로 초점을 맞추기

가장 좋은 사용자 체험은 다음 사용 가능한 입력을 이미 보이는 키보드의 다음 단추에 집중하는 것이다. 아무도 모든 사용 가능한 입력을 터치해서 표를 채우려고 하지 않는다.이것은 모든 형식이 지금 반드시 해야 하는 것이다.문제는 입력한 참고값을 관리하고 validation 로 초점을 맞추는 것이다.
Formr는 내부에서ref를 유지하고 다음ref를submitHandler에 집중하여 이 문제를 해결합니다.

관리 검증

네, 여러 개의 입력 관리 검증을 사용하는 데 시간이 걸리거나 의외로 복잡합니다.모든 필드는 자신의 검증 처리 유형이 있기 때문에 상호작용 후에 오류를 표시하기 위해 터치 상태를 처리해야 한다. 만약 우리가 정확하게 계획하지 않았다면, 그것은 매우 거대해질 것이다.
Formr는 우리가 다시 쓰고 싶지 않은 것이 하나 있다.하나의 패키지 처리 터치 상태 관리, 검증 주기, 검증의 초점 이벤트 등등.또한 값이 변경되거나 제출될 때의 필드를 검증하고 유효한 대상을 업데이트하며 닿지 않는 입력 필드에 초점을 맞춘다.

양식 값 관리

입력 값을 위해 여러 상태를 유지해야 할 수도 있습니다. 모든 값을 업데이트하고 검증하기 위해 함수를 만들려고 하면 너무 많습니다.
Formr는 초기 값을 수신하여 모든 폼 필드가 업데이트될 때 관리합니다. 여러 위치에서 값 대상을 제공합니다. 즉, 폼 렌더링 함수에서 값으로 onSubmitEditing, onSubmitprop, onFinishFocusprop에 있습니다.

최종적

내가 내 프로젝트를 하고 있을 때, 나는 내가 몇 가지를 반복해서 쓰고 있다고 생각한다.만약 내가 어떤 플러그인을 사용해서 그것을 완성하려고 한다면, 자신의 학습 곡선과 장애가 있거나, 내가 반드시 여러 개의 플러그인을 사용해서 하나의 표를 완성해야 한다면, 이후에 처리해야 할 일은 너무 많다.그래서 저는 가방을 만들어서 여러분과 공유했습니다.만약 이 방면에 개선할 것이 있다면, 저에게 건의해 주세요.
NPM 회사
react-formr
github
react-formr
my github profile