<p>Je rencontre des problèmes avec le commutateur à bascule Material UI que j'utilise dans mon projet actuel. Lorsque le composant se charge, si j'enregistre la valeur dans la console, la valeur initiale est correcte. Cependant, si je clique sur le commutateur de « Oui » à « Non », le commutateur s'affiche correctement en indiquant que « Non » est sélectionné et la journalisation de la console se déclenche à nouveau, mais la valeur affiche toujours « Oui ». Si je clique à nouveau sur le commutateur et que j'essaie de le remettre sur "Non", la bascule est simplement restituée sans basculer, la journalisation de la console se déclenche à nouveau et la valeur est maintenant mise à jour sur "Non".Donc, fondamentalement, le premier clic inverse le commutateur et le deuxième clic inverse la valeur. J'ai déjà utilisé le même interrupteur à bascule sans problème, alors quelqu'un peut-il me dire ce que je dois corriger pour que l'interrupteur et la valeur s'inversent lorsque vous cliquez dessus ? </p> <p><strong>Gestion des modifications apportées aux entrées :</strong></p> <pre class="brush:php;toolbar:false;">const handleInputChange = e => const { nom, valeur } = e.target; setValues({ ...valeurs, [nom] : ( typeof value === 'string' ? (value).replace(/ +(?= )/g, '').trimStart() : value ) // Si la valeur est une chaîne, supprime les espaces de début et les espaces multiples }); };</pré> <p><strong>Commutateur appelé à partir du formulaire : </strong></p> <pre class="brush:php;toolbar:false;"><ToggleSwitch onChange={handleInputChange} label1='Non' label2='Oui' nom='useForCalcs' valeur={values.useForCalcs} /></pré> <p><strong>Composant ToggleSwitch : </strong></p> <pre class="brush:php;toolbar:false;">import * as React from 'react'; importer {Box, Switch, Typography} depuis '@material-ui/core' ; fonction d'exportation par défaut ToggleSwitch (props) { const { label1, label2, nom, onChange, valeur} = accessoires ; const [checked, setChecked] = React.useState(false); const convertToEventParams = (nom, valeur) => ({ cible : { nom, valeur } }); const curValue = valeur === 1 ? const handleSwitch = e => { setChecked(e.target.checked }); React.useEffect(() => { setChecked(curValue); }, [curValue]); // Restitue le commutateur à bascule à chaque fois que la valeur vérifiée change const handleChecked = e => handleSwitch(e); onChange(convertToEventParams(name, (checked === false ? 1 : 0))); // Convertit True/False en valeur 1/0 } ; retour ( <Boîte> <Typographie> {étiquette1} {<Commutateur nom={nom} vérifié={vérifié} valeur = {vérifié} onChange={handleChecked} inputProps={{'aria-label' : 'switch'}} />} {étiquette2} </Typographie> ≪/Boîte> ); }</pré> <p><br /></p>

import React from 'react';
import { Box, Switch, Typography } from '@material-ui/core';

export default function ToggleSwitch(props) {
  const { label1, label2, name, onChange, value } = props;

  const handleChecked = () => {
    const newValue = value === 0 ? 1 : 0; // 切换值
    onChange({ target: { name, value: newValue } });
  };

  return (
    <Box>
      <Typography>
        {label1}
        <Switch
          name={name}
          checked={value === 1}
          onChange={handleChecked}
          inputProps={{ 'aria-label': 'switch' }}
        />
        {label2}
      </Typography>
    </Box>
  );
}