所以我正在使用 formik 在 React 中构建一个表单。我制作了一个 TextInput 组件，其中包含一个进行了一些更改的输入字段。当我使用changeHandler时，它应该更新我输入的值，但事实并非如此。我想知道是否应该对 textInput 组件进行一些更改。

ContactForm.jsx

import React, { useState, useMemo } from "react";
import countryList from "react-select-country-list";
import { doc, setDoc, addDoc } from "firebase/firestore";
import { accountReqRef } from "../../Firebase";
import { useFormik } from "formik";

import Alert from "../../shared/components/UIElements/Alert";
import FormSelect from "../../shared/components/UIElements/FormSelect";
import TextInput from "../../shared/components/UIElements/TextInput";

const ContactForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      company: "",
      jobTitle: "",
      phone: "",
      country: "",
    },
  });

  const options = useMemo(() => countryList().getData(), []);

  const toast = (
    

      

        

          New mail arrived.
        
      
      

        

          Message sent successfully.
        
      
    
  );

  // document submission date
  const current = new Date();
  const date = `${current.getDate()}/${
    current.getMonth() + 1
  }/${current.getFullYear()}`;

  const accountReqDoc = {
    firstName: formik.values.firstName,
    lastName: formik.values.lastName,
    email: formik.values.email,
    company: formik.values.company,
    jobTitle: formik.values.jobTitle,
    phone: formik.values.phone,
    country: formik.values.country,
    subDate: date,
    status: "pending verification",
  };
  console.log(formik);

  //add account request document to accountReq collection

  const addAccReq = () => {
    return 
ContactForm
;
  };

  /*const changeHandler = (country) => {
    setCountry(country);
  };
*/
  return (
    

      

        
          First name
        
        
          Last name
        
        
          Email
        
        
          Confirm email
        
        

          
            Your email address will be used to send the access credentials once
            your account creation request will be verified.
          
        

        
          Company name
        
        
          Job title
        
        
          Phone number
        
        
        

          
              addDoc(accountReqRef, accountReqDoc).then(() => toast)
            }
          >
            Submit
          
        
      
    
  );
};

export default ContactForm;

TextInput.jsx

import React from "react";
import { BsInfoLg as InfoIcon } from "react-icons/bs";

const TextInput = (props) => {
  const isRequired = props.required;
  const infoText = props.info;
  return (
    

      
        

          {isRequired ? "*" : null}
          {props.label}
        
        {
          //renders info tooltip if info prop is passed
          infoText ? (
            

              
                
              
            
          ) : null
        }
      
       {
                props.onChange(e.target.value);
              }
            : null
        }
      />
    
  );
};

export default TextInput;