如何验证是否需要文本输入的值？

Question

我尝试将数据从JSON URL渲染到输入中。数据正确渲染的问题是，我不知道该如何检查输入是否需要您可以在JSON数据中检查数组（来自]的数组有5个对象，并且这5个对象中的每个对象都有一个键< strong>必需谁具有 true 或 false 的价值

，我有2个问题：

1. 如何验证是否需要现场值？
2. 如何将输入到表单中的所有数据发送到API URL。检查 submistData（）函数

JSON数据：

{
   "title":"Contact us",
   "subtitle":"Enter your details to contact us",
   "action":"form",
   "configuration":[
      {
         "title":"Contact us",
         "subtitle":"Enter your details to contact us",
         "type":"action",
         "actiontype":"form",
         "posturl":"https://flow.simpas.ai/interview/content/123456/businesscard/",
         "form":[
            {
               "fieldtype":"field",
               "title":"First Name",
               "fieldname":"firstname",
               "placeholder":"Enter your first name",
               "iconurl":"https://www.creativefabrica.com/wp-content/uploads/2019/02/People-Icon-by-Kanggraphic-1-580x386.jpg",
               "fieldvalue":"",
               "required":true
            },
            {
               "fieldtype":"field",
               "title":"Last Name",
               "fieldname":"latstname",
               "placeholder":"Enter your last name",
               "iconurl":"https://www.creativefabrica.com/wp-content/uploads/2019/02/People-Icon-by-Kanggraphic-1-580x386.jpg",
               "fieldvalue":"",
               "required":true
            },
            {
               "fieldtype":"email",
               "title":"Email",
               "fieldname":"email",
               "placeholder":"Enter your email",
               "iconurl":"data:image/png;base64,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",
               "fieldvalue":"",
               "required":true
            },
            {
               "fieldtype":"textarea",
               "title":"Note",
               "fieldname":"note",
               "placeholder":"Enter your note",
               "iconurl":"data:image/png;base64,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",
               "fieldvalue":"",
               "required":true
            }
         ]
      }
   ]
}

代码：

import React, { useState,useEffect } from 'react';
import {
  View,
  Text,
  TextInput,
  SafeAreaView,
  Keyboard,
  ScrollView,
  Alert,
} from 'react-native';

import COLORS from '../src/conts/colors';
import Button from '../src/views/components/Button';
import Input from '../src/views/components/Input';
import Loader from '../src/views/components/Loader';

const ContactForm = ({navigation}) => {
  const [inputs, setInputs] = React.useState({
    firstname: '',
    lastname: '',
    email: '',
    note: '',
  });
  const [errors, setErrors] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  const validate = () => {
    Keyboard.dismiss();
    let isValid = true;

    if (!inputs.firstname) {
      handleError('Please input first name', 'firstname');
      isValid = false;
    }

    if (!inputs.lastname) {
      handleError('Please input last name', 'lastname');
      isValid = false;
    }

    if (!inputs.email) {
      handleError('Please input email', 'email');
      isValid = false;
    } else if (!inputs.email.match(/\S+@\S+\.\S+/)) {
      handleError('Please input a valid email', 'email');
      isValid = false;
    }
    if (!inputs.note) {
      handleError('Please input note', 'note');
      isValid = false;
    }

    if (isValid) {
      submitData();
    }
  };
  const submitData = ()=>{
          fetch("https://flow.simpas.ai:2021/react/contact",{
              method:"post",
              headers:{
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                  firstname: inputs.firstname,
                  lastname: inputs.lastname,
                  email: inputs.email,
                  note: inputs.note,
      })
          })
          .then(res=>res.json())
          .then(data=>{
              alert(`${data.firstname} is saved successfuly`);
              navigation.navigate("Home")
          })
          .catch(err=>{
            alert("someting went wrong")
        })

    };



  const handleOnchange = (text, input) => {
    setInputs(prevState => ({...prevState, [input]: text}));
  };
  const handleError = (error, input) => {
    setErrors(prevState => ({...prevState, [input]: error}));
  };
  const [data, getData] = useState([])
  const URL = "https://flow.simpas.ai:2021/react/contact";

  useEffect(() => {
      fetchData()
  }, [])


  const fetchData = () => {
      fetch(URL)
          .then((res) =>
              res.json())

          .then((response) => {
              console.log(response);
              getData(response.configuration?.[0]);
          })
  }

  return (
      <SafeAreaView style={{ flex: 1}}>
        <Loader visible={loading} />
        <ScrollView
          contentContainerStyle={{paddingTop: 50, paddingHorizontal: 20}}>
          <Text style={{color: COLORS.black, fontSize: 40, fontWeight: 'bold',fontFamily: 'Roboto',textAlign: 'center'}}>
            {data?.title}
          </Text>
          <Text style={{color: COLORS.grey, fontSize: 18, marginVertical: 10,fontFamily: 'Roboto',textAlign: 'center'}}>
            {data?.subtitle}
          </Text>
          <View style={{ marginVertical: 20 }}>
        {data?.form?.map?.((item, i) => {
          return (
            <Input key={i}
              onChangeText={(text) =>
                handleOnchange(text, item.fieldname)
              }
              onFocus={() =>
                handleError(null, item.fieldname)
              }
              iconName="account-outline"
              label={item.title}
              placeholder={item.placeholder}
            />
          );
        })}

        <Button title="Contact Us" onPress={validate} />
  </View>
        </ScrollView>
      </SafeAreaView>
    );
};

export default ContactForm;

输出看起来像这样：

<

Answer 1

我认为最好的答案是使用 react-hook-form 。这是一个提供简单道具的库，例如：必需的字段，最小/最大长度，字段的正则表达方式。

许多开发商和公司都使用它非常普遍。我真的会考虑现在和将来使用它；）

有一个不错的片段可以解释插件的工作方式：

import React from "react";
import { useForm } from "react-hook-form";

const RegisterForm = () => {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const handleRegistration = (data) => console.log(data);
  const handleError = (errors) => {};

  const registerOptions = {
    name: { required: "Name is required" },
    email: { required: "Email is required" },
    password: {
      required: "Password is required",
      minLength: {
        value: 8,
        message: "Password must have at least 8 characters"
      }
    }
  };

  return (
    <form onSubmit={handleSubmit(handleRegistration, handleError)}>
      <div>
        <label>Name</label>
        <input name="name" type="text" {...register('name', registerOptions.name) }/>
        <small className="text-danger">
          {errors?.name && errors.name.message}
        </small>
      </div>
      <div>
        <label>Email</label>
        <input
          type="email"
          name="email"
          {...register('email', registerOptions.email)}
        />
        <small className="text-danger">
          {errors?.email && errors.email.message}
        </small>
      </div>
      <div>
        <label>Password</label>
        <input
          type="password"
          name="password"
          {...register('password', registerOptions.password)}
        />
        <small className="text-danger">
          {errors?.password && errors.password.message}
        </small>
      </div>
      <button>Submit</button>
    </form>
  );
};
export default RegisterForm;