Here, I attempted to create a custom component that can receive data through props and function as a basic form input.

在这里，我尝试创建一个定制组件，它可以通过道具接收数据，并充当基本的表单输入。

However, I encountered an issue where errors are not being displayed. Can someone please explain what mistake I might have made in my implementation?

但是，我遇到了一个没有显示错误的问题。有人能解释一下我在实现过程中可能犯了什么错误吗？

If anyone has the knowledge, I would greatly appreciate your assistance in resolving this issue.

如果有人知道这一点，我将非常感谢您在解决这个问题上的帮助。

trying to build an reuseable component but now working why??

/* eslint-disable react/prop-types */



const Input = (props) => {
  const {formik, icon, title,type,otherState,btn1,btn2, name} = props
  Input.defaultProps = {
    type: "text",
    otherState: null,
    btn1: null,
    btn2: null,
    name: title.toLowerCase()
  }

   if (otherState) {
     var {state, setState} = otherState
   }
    if (btn1) {
      var {icon1, text1, action1} = btn1
    }
    if (btn2) {
      var {icon2, text2, action2} = btn2
    }

    


  return (
   <div className="mb-2">
   <span className="flex">
     <img className="w-6 h-6 mr-2" src={icon} alt={title} />
     <label
       htmlFor={name}
       className="block text-sm font-semibold text-textPrimary dark:text-dark_textPrimary"
     >
       {title}
     </label>
   </span>
   <span className="flex w-full">
{console.log(formik.touched.name)}
   <input
     
     type={type}
     name={name}
     value={formik.values.name}
     title={`${formik.touched.name && formik.values.name == "" ? `${title} is required` : ""}`}
     onChange={formik.handleChange}
     onBlur={formik.handleBlur}
     placeholder={
       formik.touched.name && formik.errors.name
         ? `${title} is required`
         : `${title}`
     }
     className={`block w-full px-4 py-2 mt-2 text-textPrimary dark:text-dark_textPrimary bg-background dark:bg-dark_background border-2 rounded-md focus:ring-secondary ${
       formik.touched.name && formik.errors.name 
         ? " border-error_red placeholder-error_red"
         : "border-cardBorder dark:border-dark_cardBorder"
     }`}
   />

     {
        btn1 || btn2 ? (
          <img
       className="w-6 h-7 cursor-pointer mt-3 transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110"
       onClick={() => action1()}
       src={state ? icon1 : icon2}
       title={!state ? text1 : text2}
     />) : null
     }
   </span>
{
     formik.touched.name && formik.errors.name && formik.values.name != "" ? (
       <h3 className="text-xs text-error_red">{formik.errors.name}</h3>
     ) : null
   }
 </div>
  )
}

export default Input

Here is a Input component,
That first components for email and second for password

这是一个输入组件，第一个组件用于电子邮件，第二个组件用于密码

<Input
          formik={formik}
          icon={emailIcon}
          title="Email"
          name="email"
          type="email"
          />

          <Input 
          formik={formik}
          icon={passwordIcon}
          name="password"
          title="Password"
          type={showPassword ? "password" : "text"}
          otherState={{'state':showPassword, 'setState':setShowPassword}}
          btn1={{'icon1':eyeOpenIcon, 'text1':"Hide Password", 'action1':() => setShowPassword(!showPassword)}}
          btn2={{'icon2':eyeCloseIcon, 'text2':"Show Password", 'action2':() => setShowPassword(!showPassword)}}
       

          />

To access the value or the error related to a given input, you should use its name. Since inside your Input component, you are getting the name as part of a name prop, you would do like this:

要访问与给定输入相关的值或错误，应使用其名称。由于在您的输入组件中，您将获得名称作为名称道具的一部分，因此您将这样做：

formik.values[name]  // To access its value
formik.touched[name] // To check if it's checked
formik.errors[name]  // To gets its related error

Formik has tons of different examples you can use on their GitHub and documentation.

Formik有大量不同的例子，你可以在他们的GitHub和文档中使用。

Rather than spin up your own, you could potentially build off one of their examples so to speak.

可以说，你可以借鉴他们的一个例子，而不是编造自己的例子。

For example, there is this example which gives immediate feedback for validation on the fields. Take a look at this codesandbox and code below:

例如，有这样一个示例，它为字段的验证提供即时反馈。请看下面的代码框和代码：

index.js

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { useFormik, FormikProvider, Form, useField } from 'formik';
import './styles.css';
import * as Yup from 'yup';

const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

const TextInputLiveFeedback = ({ label, helpText, ...props }) => {
  const [field, meta] = useField(props);

  // Show inline feedback if EITHER
  // - the input is focused AND value is longer than 2 characters
  // - or, the has been visited (touched === true)
  const [didFocus, setDidFocus] = React.useState(false);
  const handleFocus = () => setDidFocus(true);
  const showFeedback =
    (!!didFocus && field.value.trim().length > 2) || meta.touched;

  return (
    <div
      className={`form-control ${
        showFeedback ? (meta.error ? 'invalid' : 'valid') : ''
      }`}
    >
      <div className="flex items-center space-between">
        <label htmlFor={props.id}>{label}</label>{' '}
        {showFeedback ? (
          <div
            id={`${props.id}-feedback`}
            aria-live="polite"
            className="feedback text-sm"
          >
            {meta.error ? meta.error : '✓'}
          </div>
        ) : null}
      </div>
      <input
        {...props}
        {...field}
        aria-describedby={`${props.id}-feedback ${props.id}-help`}
        onFocus={handleFocus}
      />
      <div className="text-xs" id={`${props.id}-help`} tabIndex="-1">
        {helpText}
      </div>
    </div>
  );
};

const Example = () => {
  const formik = useFormik({
    initialValues: {
      username: '',
    },
    onSubmit: async (values) => {
      await sleep(500);
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: Yup.object({
      username: Yup.string()
        .min(8, 'Must be at least 8 characters')
        .max(20, 'Must be less  than 20 characters')
        .required('Username is required')
        .matches(
          /^[a-zA-Z0-9]+$/,
          'Cannot contain special characters or spaces'
        ),
    }),
  });

  return (
    <FormikProvider value={formik}>
      <Form>
        <TextInputLiveFeedback
          label="Username"
          id="username"
          name="username"
          helpText="Must be 8-20 characters and cannot contain special characters."
          type="text"
        />
        <div>
          <button type="submit">Submit</button>
          <button type="reset">Reset</button>
        </div>
      </Form>
    </FormikProvider>
  );
};

ReactDOM.render(
  <div className="app">
    <h1 className="text-4xl">Accessible instant feeback with Formik 2</h1>
    <div className="example">
      <Example />
    </div>
   
  </div>,
  document.getElementById('root')
);