Also erstelle ich ein Formular in React mit Formik. Ich habe eine TextInput-Komponente erstellt, die ein Eingabefeld mit einigen Änderungen enthält. Wenn ich changeHandler verwende, sollte der von mir eingegebene Wert aktualisiert werden, dies geschieht jedoch nicht. Ich frage mich, ob ich einige Änderungen an der textInput-Komponente vornehmen sollte.

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;