如何使用 React 正确处理复选框？

Question

我们完全迷失了 React 中的复选框。

我们的字段复选框：RGPD 和 ChaterAcceptance，当我们在数据库中发布时，不要进行布尔更改。

任何人都可以帮助我们解决我们的问题，我们已经进行了一些测试和搜索，但是如果您的知识可以帮助我们，那就太好了。

我们尝试了这些更改，但它们也不起作用：

const handleToggleRGPD = useCallback(event => {
        setToggle(({ RGPD, ...prevState }) =>
          ({ ...prevState, RGPD: !RGPD })
        );
      }, [setToggle]);

    const handleToggleChater = useCallback(event => {
        setToggle(({ chaterAcceptance, ...prevState }) =>
          ({ ...prevState, chaterAcceptance: !chaterAcceptance })
        );
      }, [setToggle]);

<Field
                        name="RGPD"
                        label="Conditions utilisateur"
                        placeholder="Veuillez cocher la case"
                        type="checkbox"
                        error={errors.RGPD}
                        value={userPro.RGPD}
                        checked={toggle}
                        onChange={handleToggleRGPD}
                    />

const [toggle, setToggle] = useState(false);

    const [userPro, setUserPro] = useState({
        firstName: "",
        lastName: "",
        email: "",
        RGPD: toggle,
        address: "",
        siret: "",
        therapy: "",
        chaterAcceptance: toggle,
        rate: "",
        paymentMethod: "",
        expertise: "",
        presentation: "",
        openingTime: "",
        languages: "",
        password: "",
        passwordConfirm: "",
    });

这是我们没有修改 RegisterPagePro.jsx 的代码：

import React, { useState } from "react";
import Field from "../components/forms/Field";
import { Link } from "react-router-dom";
import UsersProAPI from "../services/userProAPI";
import { toast } from "react-toastify";

const ProRegisterPage = ({ history }) => {
  const [userPro, setUserPro] = useState({
    firstName: "",
    lastName: "",
    email: "",
    RGPD: false,
    address: "",
    siret: "",
    therapy: "",
    chaterAcceptance: false,
    rate: "",
    paymentMethod: "",
    expertise: "",
    presentation: "",
    openingTime: "",
    languages: "",
    password: "",
    passwordConfirm: ""
  });

  const [errors, setErrors] = useState({
    firstName: "",
    lastName: "",
    email: "",
    RGPD: false,
    address: "",
    siret: "",
    therapy: "",
    chaterAcceptance: false,
    rate: "",
    paymentMethod: "",
    expertise: "",
    presentation: "",
    openingTime: "",
    languages: "",
    password: "",
    passwordConfirm: ""
  });

  // Gestion des changements des inputs dans le formulaire
  const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    setUserPro({ ...userPro, [name]: value });
  };

  const handleSubmit = async event => {
    event.preventDefault();

    const apiErrors = {};

    if (userPro.password !== userPro.passwordConfirm) {
      apiErrors.passwordConfirm =
        "Votre confirmation de mot de passe n'est pas conforme avec le mot de passe original";
      setErrors(apiErrors);
      toast.error("Des erreurs dans votre formulaire !");
      return;
    }

    try {
      await UsersProAPI.registerPro(userPro);
      setErrors({});

      // TODO : Flash success
      toast.success(
        "Vous êtes désormais inscrit, vous pouvez vous connecter !"
      );
      history.replace("/login");
    } catch (error) {
      const { violations } = error.response.data;

      if (violations) {
        violations.forEach(violation => {
          apiErrors[violation.propertyPath] = violation.message;
        });
        setErrors(apiErrors);
      }

      // TODO : Flash erreur
      toast.error("Des erreurs dans votre formulaire !");
    }
  };
  return (
    <>
      <h1>Inscription pour les professionnels</h1>
      <form onSubmit={handleSubmit}>
        <Field
          name="firstName"
          label="Prénom"
          placeholder="Votre joli prénom"
          error={errors.firstName}
          value={userPro.firstName}
          onChange={handleChange}
        />
        <Field
          name="lastName"
          label="Nom de famille"
          placeholder="Votre nom de famille"
          error={errors.lastName}
          value={userPro.lastName}
          onChange={handleChange}
        />
        <Field
          name="email"
          label="Adresse email"
          placeholder="Votre adresse email"
          type="email"
          error={errors.email}
          value={userPro.email}
          onChange={handleChange}
        />
        <Field
          name="RGPD"
          label="Conditions utilisateur"
          placeholder="Veuillez cocher la case"
          type="checkbox"
          error={errors.RGPD}
          value={userPro.RGPD}
          onClick={handleClick}
        />
        <Field
          name="address"
          label="Adresse postale"
          placeholder="Votre adresse postale"
          error={errors.address}
          value={userPro.address}
          onChange={handleChange}
        />
        <Field
          name="siret"
          label="Siret"
          placeholder="Siret"
          error={errors.siret}
          value={userPro.siret}
          onChange={handleChange}
        />
        <Field
          name="therapy"
          label="Thérapie pratiquée"
          placeholder="Thérapie"
          error={errors.therapy}
          value={userPro.therapy}
          onChange={handleChange}
        />
        <Field
          name="chaterAcceptance"
          label="Acceptation de la charte"
          placeholder="Charte"
          type="checkbox"
          error={errors.chaterAcceptance}
          value={userPro.chaterAcceptance}
          onClick={handleClick}
        />
        <Field
          name="rate"
          label="Honoraires"
          placeholder="Honoraires"
          error={errors.rate}
          value={userPro.rate}
          onChange={handleChange}
        />
        <Field
          name="paymentMethod"
          label="Méthode de paiement"
          placeholder="Votre méthode de paiement"
          error={errors.paymentMethod}
          value={userPro.paymentMethod}
          onChange={handleChange}
        />
        <Field
          name="expertise"
          label="Compétence"
          placeholder="Vos compétences"
          error={errors.expertise}
          value={userPro.expertise}
          onChange={handleChange}
        />
        <Field
          name="presentation"
          label="Présentation"
          placeholder="Présentation"
          error={errors.presentation}
          value={userPro.presentation}
          onChange={handleChange}
        />
        <Field
          name="openingTime"
          label="Horaires d'ouverture"
          placeholder="Horaires"
          error={errors.openingTime}
          value={userPro.openingTime}
          onChange={handleChange}
        />
        <Field
          name="languages"
          label="Langues"
          placeholder="Langues parlées"
          error={errors.languages}
          value={userPro.languages}
          onChange={handleChange}
        />
        <Field
          name="password"
          label="Mot de passe"
          type="password"
          placeholder="Votre mot de passe ultra sécurisé"
          error={errors.password}
          value={userPro.password}
          onChange={handleChange}
        />
        <Field
          name="passwordConfirm"
          label="Confirmation de mot de passe"
          type="password"
          placeholder="Confirmez votre super mot de passe"
          error={errors.passwordConfirm}
          value={userPro.passwordConfirm}
          onChange={handleChange}
        />
        <div className="form-group">
          <button type="submit" className="btn btn-success">
            Confirmation
          </button>
          <Link to="/login" className="btn btn-link">
            J'ai déjà un compte
          </Link>
        </div>
      </form>
    </>
  );
};

export default ProRegisterPage;

Answer 1

问题似乎是由于您试图读取像event.target.value 这样的复选框值，但它应该是：event.target.checked

这是一个控制表单域的示例。 在这个简单的示例中，handleChange 方法首先检查字段的类型，如果是复选框，则获取 event.target.checked 值。 希望对您有所帮助。

const myComponent = () => {
   const [userPro, setUserPro] = useState({
     firstName: "",
     RGPD: false,
   });

   const handleChange = (e) => {
    const target = e.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setUserPro({...userPro, [name]: value});
  };


  return (
    <div>
      <input 
        type="checkbox" 
        name="RGPD" 
        checked={userPro.RGPD} 
        onChange={handleChange}/>
      <input 
        type="text" 
        name="firstName" 
        value={userPro.firstName} 
        onChange={handleChange}/>
    </div>
  )
}

Answer 2

您也可以使用 Set 来存储复选框的值。

句柄复选框应该类似于

`

handleCheckboxChange(evt){
    var valueSet = this.state[evt.target.name];
    if(evt.target.checked){
        valueSet.add(evt.target.value);
    }
    else{
        valueSet.delete(evt.target.value);
    }
    this.setState({
        ...this.state,
        [evt.target.name]: valueSet
    });
}

`

输入应该是这样的

`

<input
    type="checkbox"
    id="createLP_jobFunction_1"
    name="inputName"
    value="inputValue"
    checked={this.state['inputName'].has('inputValue')}
    onChange={this.handleCheckboxChange}
 />

`