L'affichage et la valeur ne peuvent pas être mis à jour lorsque le commutateur MUI est cliqué.

Question

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 ?

Gestion des modifications apportées aux entrées :

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
        });
    };
Commutateur appelé à partir du formulaire : 

Composant ToggleSwitch : 
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 (
    
      
        {étiquette1}
        {}
        {étiquette2}
      
    ≪/Boîte>
  );
}

Answer 1

Vous gérez l'état et la valeur sélectionnée dans le composant ToggleSwitch. Vous avez à la fois un état local (coché) et un accessoire (valeur) et vous souhaitez les synchroniser.

Pour résoudre ce problème, assurez-vous que les commutateurs et les valeurs sont correctement synchronisés

Vous transmettez un accessoire de valeur du composant parent et vous pouvez utiliser cet accessoire directement pour déterminer l'état du commutateur. Vous pouvez simplifier le code des composants en supprimant les états et effets inutiles.

Vous pouvez utiliser directement l'accessoire value pour déterminer l'état initial du commutateur et utiliser la fonction onChange pour mettre à jour le composant parent.

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>
  );
}