Блог

Я пытаюсь реализовать свой собственный компонент валидатора для входных данных в React native, мой компонент получает тип функции для проверки, функцию set для набора(«возврата») результата и свойство, позволяющее узнать, включено ли оно.

Валидатор.tsx

 const OnlyNumbers=(value:any, message:string="Error number format")=>{
  let match=false;
  if(typeof value =="number")
    match=true;
  if(typeof value=="string")
    match= /^[0-9]*$/.test(value);

  return match ? '' : message;
}

const Email=(value:string, message:string="Error email format" ):string=>{
   let match=false;
   match= /^[w-.] @([w-] .) [w-]{2,4}$/.test(value);
   return match ? '' : message;
}

const Validator=(props)=>{
  const {setResult, typeValidate, enable=true , defStyle={color:'red', fontSize:15}} = props;
  const [text, setText] = useState('');

  useEffect(()=>{
    if(enable){
        //to invoke received function validate
        let sms = typeValidate()
        setText(sms)
        //returns if exists an error
        setResult(sms.length>0)
    }   
  }, [enable, setResult])

  return(
    <>
    {enable amp;amp; text.length>0 ? <Text style={defStyle}>{text}</Text>:null}
    </>
  );
}

export const ValidatorType={
 OnlyNumbers,
 Email,
}

export default Validator;
 

Реализация.tsx

 import Validator, {ValidatorType} from '../Components/Validator'

const Implementation=(props)=>{
  const [email, setEmail] = useState('');
  const [telephone, setTelephone] = useState('');
  const [submit, setSubmit] = useState(false);
  const [errorForm, setErrorForm] =useState(false);

  async function RegisterTaster(){
    setSubmit(true)
    if(!errorForm){
       //do something.....
    }
  }

  return(
    <View>
      <TextInput placeholder="Email..." defaultValue={email} onChangeText={txt=> setEmail(txt)} style={Styles.txtInputs} />
      <Validator typeValidate={()=>ValidatorType.Email(email)} setResult={resp=> setErrorForm(resp)} enable={submit} defStyle={Styles.txtInputsError} /> 
      <TextInput placeholder="Telephone..." defaultValue={telephone} onChangeText={txt=> setTelephone(txt)} style={Styles.txtInputs} />
      <Validator typeValidate={()=>ValidatorType.OnlyNumbers(telephone)} setResult={resp=> setErrorForm(resp)} defStyle={Styles.txtInputsError} /> 

      <Button primary style={Styles.btnRegister} onPress={async ()=> await RegisterTaster() }> 
                        <Text style={Styles.txtRegister}>Register</Text> 
      </Button>
    <View>
  )
}
 

На самом деле в RegisterTaster() сначала я установил значение «Отправить» в значение «истина» для обновления параметра «Включить» в каждом валидаторе; я хочу, чтобы в этот момент, если существует ошибка, форма ошибки обновления валидатора, прежде чем перейти к следующему, если для того, чтобы узнать, нужно ли что-то делать или нет…

Как я могу подождать, пока валидатор обновит форму ошибки, прежде чем оценивать следующую ?

вы можете использовать асинхронность и ждать

 const Email=(value:string, message:string="Error email format" ):string=>{
   let match=false;
   match= /^[w-.] @([w-] .) [w-]{2,4}$/.test(value);
   return match ? '' : message;
}

const Validator= async(props)=>{
  const {setResult, typeValidate, enable=true , defStyle={color:'red', fontSize:15}} = props;
  const [text, setText] = useState('');

  useEffect(()=>{
    if(enable){
        //to invoke received function validate
        let sms = typeValidate()
        setText(sms)
        //returns if exists an error
        setResult(sms.length>0)
    }   
  }, [enable, setResult])

  return(
    <>
    {enable amp;amp; text.length>0 ? <Text style={defStyle}>{text}</Text>:null}
    </>
  );
}

export const ValidatorType={
 OnlyNumbers,
 Email,
}

export default Validator;
 

и используйте await везде, где вам нужно

Мне нужно было определить значение для набора результата проверки «Указать», например (setIsValidEmail):

 <Validator typeValidate={()=>ValidatorType.Email(email)} value={email} setResult={resp=> setIsValidEmail(resp)} visible={enabledValidator} />
 

И в функции я запрашиваю результат:

  if(isValidEmail)
 {...do something}