所以我正在使用 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 = ( <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;
我的直覺是,您的輸入要么缺少
id
或name
。這是來自文件 https://formik.org/文件/api/formik#handlechange-e-reactchangeeventany--void
例如
這樣想,
handleChange
怎麼知道哪個欄位正在更新。