La console n'affiche pas la saisie de texte que je fournis

Question

Je construis donc un formulaire dans React en utilisant formik. J'ai créé un composant TextInput qui contient un champ de saisie avec quelques modifications. Lorsque j'utilise changeHandler, il devrait mettre à jour la valeur que j'ai saisie, mais ce n'est pas le cas. Je me demande si je devrais apporter des modifications au composant 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 = (
    <div className="toast toast-end">
      <div className="alert alert-info">
        <div>
          <span>New mail arrived.</span>
        </div>
      </div>
      <div className="alert alert-success">
        <div>
          <span>Message sent successfully.</span>
        </div>
      </div>
    </div>
  );

  // 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 <div>ContactForm</div>;
  };

  /*const changeHandler = (country) => {
    setCountry(country);
  };
*/
  return (
    <div className="px-6 w-[700px]">
      <div className="grid grid-cols-1 md:grid-cold-2 gap-8">
        <TextInput
          label="First Name"
          required
          value={formik.values.firstName}
          onChange={formik.handleChange}
        >
          First name
        </TextInput>
        <TextInput
          label="Last Name"
          required
          value={formik.values.lastName}
          onChange={formik.handleChange}
        >
          Last name
        </TextInput>
        <TextInput
          label="Business Email"
          required
          info="Only business emails are allowed! No private emails adresses."
          value={formik.values.email}
          onChange={formik.handleChange}
        >
          Email
        </TextInput>
        <TextInput label="Confirm Email" required onChange={null}>
          Confirm email
        </TextInput>
        <div className="col-span-2">
          <Alert>
            Your email address will be used to send the access credentials once
            your account creation request will be verified.
          </Alert>
        </div>

        <TextInput
          label="Company Name"
          required
          value={formik.values.company}
          onChange={formik.handleChange}
        >
          Company name
        </TextInput>
        <TextInput
          label="Job Title"
          required
          value={formik.values.jobTitle}
          onChange={formik.handleChange}
        >
          Job title
        </TextInput>
        <TextInput
          label="Phone Number"
          required
          value={formik.values.phone}
          onChange={formik.handleChange}
        >
          Phone number
        </TextInput>
        <FormSelect
          required
          options={options}
          value={formik.values.country}
          onChange={formik.handleChange}
        ></FormSelect>
        <div className="col-span-2 m-auto">
          <button
            className=" btn btn-primary w-32 align-middle"
            type="submit"
            onClick={() =>
              addDoc(accountReqRef, accountReqDoc).then(() => toast)
            }
          >
            Submit
          </button>
        </div>
      </div>
    </div>
  );
};

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 (
    <div className="form-control w-full max-w-xs">
      <label className="justify label">
        <div className="justify-start">
          <span className="mr-2 text-red-600">{isRequired ? "*" : null}</span>
          <span className="label-text">{props.label}</span>
        </div>
        {
          //renders info tooltip if info prop is passed
          infoText ? (
            <div
              className="tooltip tooltip-top tooltip-secondary justify-end"
              data-tip={infoText}
            >
              <span className="badge badge-secondary justify-end">
                <InfoIcon></InfoIcon>
              </span>
            </div>
          ) : null
        }
      </label>
      <input
        placeholder={props.children}
        className="input input-primary input-bordered "
        onChange={
          props.onChange
            ? (e) => {
                props.onChange(e.target.value);
              }
            : null
        }
      />
    </div>
  );
};

export default TextInput;

Answer 1

Mon intuition est que votre contribution est manquante id 或 name .

Ceci est tiré de la documentation https://formik.org/docs/api/formik#handlechange-e-reactchangeeventany--void

Par exemple

Pensez-y de cette façon, handleChangeComment savoir quel champ est en cours de mise à jour.