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;