function 更新我的表单使复选框从真/假更改为“开”，但需要它来切换真或假

Question

我遇到了一个问题，我的更改 function 使我的复选框 go 从真/假变为“打开”。 我表单中的所有字段都使用 onInputChange 并且它们都可以接受复选框。 因此，如果我输入文本字段，它会正确更新并毫无问题地保存到我的数据库中，但是如果我单击复选框，无论它启动的值如何，因为它将更改为“on”并给出无法将 varchar 转换为 int 错误。 我正在寻找一个新的 function 来正确更新复选框并为文本字段保留 onInputChange 之一。

我确实创建了一个像下面这样的，它似乎正确地从真变为假，但是 100% 清除了表格中已经存在的数据的 rest。

const onCheckboxChange = e => {
      setUser({ 
        active = !active });
        console.log(user)
    };

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams, Link } from "react-router-dom";

  const UpdateUser = () => {
    const { collectorID } = useParams();
    const [user, setUser] = useState({});
    const {collectorOptionsID, programBucketID,financeCompanyID, active, firstName, middleInitial, lastName, collectorCode, aging1to15, aging31to45, aging31to60, agingOver60, programBucketA, programBucketB, programBucketC, programBucketSU, financeCompany, debtType } = user;
    
    const onInputChange = e => {
      setUser({ 
        ...user, [e.target.name]: e.target.value });
        console.log(user)
    };

useEffect(() => {
  loadUser();
}, []);// eslint-disable-line react-hooks/exhaustive-deps

const loadUser = async () => {
  const result = await axios.get(`https://support.pawneeleasing.com/PublishedCollectorAPI/api/Collector/${collectorID}`);
  setUser(result.data);
  console.log(result.data);
};

const onSubmit = async e => {
  e.preventDefault();
  console.log(active);
  await axios.put(process.env.NODE_ENV === 'development' ? `${process.env.REACT_APP_DEV_UPDATE}${collectorID}` : `${process.env.REACT_APP_PRO_UPDATE}${collectorID}`, {
    // await axios.put(`https://support.pawneeleasing.com/PublishedCollectorAPI/api/Collector/${collectorID}`, {
        collectorID: collectorID,
        collectorOptionsID: collectorOptionsID,
        programBucketID: programBucketID,
        financeCompanyID: financeCompanyID, 
        active: active,  
        firstName: firstName,
        middleInitial: middleInitial,
        lastName: lastName,
        collectorCode: collectorCode,
        debtType: debtType,
        aging1to15: aging1to15,
        aging31to45: aging31to45,
        aging31to60:aging31to60,
        agingOver60: agingOver60,
        programBucketA: programBucketA,
        programBucketB: programBucketB,
        programBucketC: programBucketC,
        programBucketSU: programBucketSU,
        financeCompany: financeCompany,
      });
};

    return (
      <div className="newUser">
          <h1>Update Collector</h1>
            <form className="newUserForm" >
        <div className="newUserItem">
          {/*active or inactive User*/}
          <label>active</label>
          <div className="newUserCheckboxContainer">
            <input
                type='checkbox'
                name="active"
                defaultChecked={active}
                onClick={e => onInputChange(e)}
                />
          </div>
          {/*Collector First Name*/}
            <label>First Name</label>
            <input 
              type="text" 
              name="firstName"
              placeholder="First Name" 
              defaultValue={firstName} 
              onChange={e => onInputChange(e)}
            />
          {/*Collector Middle Initial*/}
            <label>Middle Initial</label>
            <input 
              type="text" 
              name="middleInitial"
              placeholder="Middle Initial" 
              defaultValue={middleInitial} 
              onChange={e => onInputChange(e)}
            />
          {/*Collector Last Name*/}
            <label>Last Name</label>
            <input 
              type="text" 
              name="lastName"
              placeholder="Last Name" 
              defaultValue={lastName} 
              onChange={e => onInputChange(e)}
            />
          {/*Collector Code First Initial Middle Initial Last Initial*/}
            <label>Collector Code</label>
            <input 
              type="text" 
              name="collectorCode"
              placeholder="Collector Code" 
              defaultValue={collectorCode} 
              onChange={e => onInputChange(e)}
            />
            {/*Aging Bucket selection section */}
            <label>Aging Bucket</label>
            <div className='newUserCheckboxContainer'>
              <label className='newUserCheckboxLabel'>1-15<br/>
              <input
                type='checkbox'
                className='AgingBucketCheckbox'
                defaultValue={aging1to15} 
                defaultChecked={aging1to15}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>31-45<br/>
              <input
                type='checkbox'
                className='AgingBucketCheckbox'
                defaultValue={aging31to45} 
                defaultChecked={aging31to45}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>31-60<br/>
              <input
                type='checkbox'
                className='AgingBucketCheckboxsm'
                defaultValue={aging31to60} 
                defaultChecked={aging31to60}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>Over 60<br/>
              <input
                type='checkbox'
                className='AgingBucketCheckboxlg'
                defaultValue={agingOver60} 
                defaultChecked={agingOver60}
                onChange={e => onInputChange(e)}
              /></label>
            </div>
            {/*Progam code selection section*/}
            <label>Program Bucket</label>
            <div className='newUserCheckboxContainer'>
              <label className='newUserCheckboxLabel'>A<br/>
              <input
                type='checkbox'
                className='programBucketChecbox'
                defaultValue={programBucketA} 
                defaultChecked={programBucketA}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>B<br/>
              <input
                type='checkbox'
                className='programBucketChecbox'
                defaultValue={programBucketB} 
                defaultChecked={programBucketB}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>C<br/>
              <input
                type='checkbox'
                className='programBucketChecbox'
                defaultValue={programBucketC} 
                defaultChecked={programBucketC}
                onChange={e => onInputChange(e)}
              /></label>
              <label className='newUserCheckboxLabel'>SU<br/>
              <input
                type='checkbox'
                className='programBucketChecbox'
                defaultValue={programBucketSU} 
                defaultChecked={programBucketSU}
                onChange={e => onInputChange(e)}
              /></label>
            </div>
            {/*Finance Company selection section*/}
            <label>Finance Company</label>
            <div className='newUserCheckboxContainer'>
            <input 
              type="text" 
              name="financeCompany"
              placeholder="financeCompany" 
              defaultValue={financeCompany} 
              onChange={e => onInputChange(e)}
            />
            </div>
            <label>Debt Type</label>
            <div className='newUserCheckboxContainer'>
            <input 
              type="text" 
              name="debtType"
              placeholder="debtType" 
              defaultValue={debtType} 
              onChange={e => onInputChange(e)}
            />
            </div>
            <button type='submit' onClick={(event)=>onSubmit(event)} className="userListAddButton">Update Collector</button>
            <Link className="userListGoBackButton" to='/users'>Go Back</Link>
          </div>
        </form>
      </div>
    );
  }

export default UpdateUser;

Answer 1

您需要通过 rest 操作符复制user属性的rest operator

const onCheckboxChange = e => {
  setUser(prev => ({
    ...prev,
    active: !prev.active 
  }))
};