Die Konsole zeigt die von mir bereitgestellte Texteingabe nicht an
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;