复选框值返回未定义

Question

大家好，我有一个问题，我有一个 2 个复选框，每个复选框都有价值。第一个复选框是 Any/Not，第二个是 Valid/Invalid。如果复选框被选中，值将更改为任何，如果未选中，则值将不是，有效/无效值相同。

我已经尝试过，但是当取消选中复选框时，我得到的值是未定义的。顺便说一句，我使用反应、节点和 mysql。但是当框中检查框时，该值会成功更改。

这是代码：

FormDataProvider.js

import React from 'react';
import {createContext, useState} from "react"
export const FormData = createContext();
export default function FormDataProvider({children}) {
    const [formData , setFormData] = useState({
        cName : "",
        Address : "",
        phoneNumber : "",
        presidentName : "",
        managerEmail : "",
        managerPhone : "",
        picEmail : "",
        picPhone : "",
        date: "",
        mainBusiness : "",
        employeeNumber : "",
        numberOfCustomer : "",
        myFile : "",
        any : "" ,
        valid : ""
      });
  return (
    <FormData.Provider value={{ formData, setFormData }}>
     {children}
    </FormData.Provider>
  );
}

表单.js

const Form = () => {

    let navigate = useNavigate();

    Axios.defaults.withCredentials = true;
  

    const { emailLog, setEmailLog } = useContext(EmailUser);
    const { loginStatus, setLoginStatus } = useContext(LoginStatus);
    const { formData , setFormData} = useContext(FormData);


  
    const handleChange = event => {
      if (event.target.checked) {
        setFormData({...formData, any : event.target.checked})
      } else {
        setFormData({...formData, any : "Not"})
      }
    };

    const handleChange2 = event => {
      if (event.target.checked) {
        setFormData({...formData, valid : event.target.checked})
      } else {
        setFormData({...formData, valid : "Invalid"})
      }
    };

   
   
  return (
    <form method='POST' encType='multipart/form-data' action='http://localhost:3001/registration'>
    <div className=''>
      <input className='inputForm' type='email' value={emailLog} name='email' required onChange={(e) => {
        setEmailLog(e.target.value) }} />
      <input className='inputForm' type='text' placeholder='Company Name' name="CompanyName" required value={formData.cName}  onChange={(event) =>
          setFormData({ ...formData, cName: event.target.value })}/>
      <input className='inputForm' type='text' placeholder='Address' name="Address" required value={formData.Address} onChange={(event) =>
          setFormData({ ...formData, Address: event.target.value })}  />
      <input className='inputForm' type='tel' placeholder='Phone Number' name="Phone" required value={formData.phoneNumber} onChange={(event) =>
          setFormData({ ...formData, phoneNumber: event.target.value })}  />
      <input className='inputForm' type='text' placeholder='President Director Name' name="PresidentName" required value={formData.presidentName} onChange={(event) => 
          setFormData({...formData, presidentName: event.target.value})} />
      <input className='inputForm' type='email' placeholder='Manager Email' name="ManagerEmail" required value={formData.managerEmail} onChange={(event) => 
          setFormData({...formData, managerEmail: event.target.value})}  />
      <input className='inputForm' type='tel'  placeholder='Manager Phone' name="ManagerPhone" required value={formData.managerPhone} onChange={(event) => 
          setFormData({...formData, managerPhone: event.target.value})} />
      <input className='inputForm' type='email'  placeholder='PIC Email' name="PICEmail" required value={formData.picEmail} onChange={(event) => 
          setFormData({...formData, picEmail: event.target.value})} />
      <input className='inputForm' type='tel'  placeholder='PIC Phone' name="PICPhone" required value={formData.picPhone} onChange={(event) => 
          setFormData({...formData, picPhone: event.target.value})} />
      <input className='inputForm' type='date'  placeholder='Date' name="EstablishedDate" required value={formData.date} onChange={(event) => 
          setFormData({...formData, date: event.target.value})} />
        <select className='selectBox' name='ChoiceBusiness' required onChange={(event) =>
          setFormData({...formData, mainBusiness: event.target.value})} >
                  <option value="" disabled selected hidden>Choose Main Business...</option>
                  <option value="Software License">Software License</option>
                  <option value="IT Services & Consulting">IT Services & Consulting</option>
                  <option value="IT Outsourcing">IT Outsourcing</option>
                  <option value="Hardware">Hardware</option>
                  <option value="General Trading">General Trading</option>
                  <option value="Others">Others</option>
        </select>
        <select className='selectBox' name='EmployeeNumber' required onChange={(event) =>
          setFormData({...formData, employeeNumber: event.target.value})} >
            <option value="" disabled selected hidden>Choose Employee Number...</option>
                <option value="1-50">1-50</option>
                <option value="51-100">51-100</option>
                <option value="101-250">101-250</option>
                <option value="251-500">251-500</option>
                <option value="500+">500+</option>
        </select>
      <input className='inputForm' type="number"  placeholder='Number of Customer' name="NumberOfCustomer" required value={formData.numberOfCustomer} onChange={(event) => 
          setFormData({...formData, numberOfCustomer: event.target.value})} />

      <input className='inputFormDate' type="file" name='pdfFiles' multiple required onChange={(event) => 
          setFormData({...formData, myFile : event.target.value})}  />


        <div className='formCheckboxes'>
          <div className='formCheckbox'>
              <p>SK Menhum & Akta Notaris</p>
             
             

          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" value="Any"  name="Any" onChange={handleChange}/>
              <label class="form-check-label" for="inlineCheckbox1">Any</label>
          </div>
          <div class="form-check form-check-inline">
              <input class="form-check-input" type="checkbox" value="Valid"  name="Valid" onChange={handleChange2}/>
              <label class="form-check-label" for="inlineCheckbox2">Valid</label>
          </div>
        
                      
        </div>
 </div>
          
          <button className='btnSubmit' type='submit'> Submit</button>
    </div>
    </form>
  )
}


export default Form

Answer 1

1. 始终使用functional update 格式根据其先前值更新状态，以防止批量状态更新丢失。
2. 选中后，您会将值设置为布尔值 checked 属性。您需要 value 属性

   尝试这样的事情

   setFormData((fd) => ({
     ...fd,
     any: event.target.checked ? event.target.value : "Not",
   }));
   

   ---

   如果输入的 name 属性与您想要的对象键匹配，您可能可以对所有输入使用通用的东西。

   复选框可以提供他们的离开数据属性中的值，例如

   <input
     class="form-check-input"
     type="checkbox"
     value="Any"
     data-off="None"
     name="any"
     onChange={handleChange}
   />
   

   // generic handler for all inputs
   const handleChange = (e) => {
     let value;
     switch (e.target.type) {
       case "checkbox":
         value = e.target.checked ? e.target.value : e.target.dataset.off;
         break;
       case "file":
         value = e.target.files[0];
         break;
       default:
         value = e.target.value;
     }
   
     setFormData((fd) => ({
       ...fd,
       [e.target.name]: value,
     }));
   };