Die Anzeige und der Wert können nicht aktualisiert werden, wenn auf den MUI-Schalter geklickt wird.

Question

Ich habe Probleme mit dem Kippschalter der Material-Benutzeroberfläche, den ich in meinem aktuellen Projekt verwende. Wenn die Komponente geladen wird und ich den Wert in der Konsole protokolliere, ist der Anfangswert korrekt. Wenn ich jedoch auf den Schalter von „Ja“ auf „Nein“ klicke, zeigt der Schalter korrekt an, dass „Nein“ ausgewählt ist und die Konsolenprotokollierung erneut ausgelöst wird, aber der Wert zeigt immer noch „Ja“ an. Wenn ich erneut auf den Schalter klicke und versuche, ihn wieder auf „Nein“ umzustellen, wird der Schalter einfach erneut gerendert, ohne ihn umzudrehen, die Konsolenprotokollierung wird erneut ausgelöst und der Wert wird nun auf „Nein“ aktualisiert.Im Grunde legt der erste Klick den Schalter um und der zweite Klick dreht den Wert um. Ich habe denselben Kippschalter bereits zuvor ohne Probleme verwendet. Kann mir also jemand sagen, was ich reparieren muss, damit der Schalter und der Wert beim Klicken umgeschaltet werden?

Eingabeänderungen verarbeiten:

const handleInputChange = e =>
        const { Name, Wert } = e.target;
        setValues({
            ...Werte,
             [name]: ( typeof value === 'string' ? (value).replace(/ +(?= )/g, '').trimStart() : value )
            // Wenn der Wert eine Zeichenfolge ist, entfernen Sie führende Leerzeichen und mehrere Leerzeichen
        });
    };

Switch aus Formular aufgerufen:

<ToggleSwitch
          onChange={handleInputChange}
          label1='Nein'
          label2='Ja'
          name='useForCalcs'
          value={values.useForCalcs}
       />

ToggleSwitch-Komponente:

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

Standardfunktion ToggleSwitch(props) exportieren {
  const { label1, label2, name, onChange, value} = props;
  const [checked, setChecked] = React.useState(false);
  const convertToEventParams = (name, value) => ({ target: { name, value } });
  const curValue = value === 1 ? true : false;
  const handleSwitch = e => { setChecked(e.target.checked };

  React.useEffect(() => { setChecked(curValue); }, [curValue]); // Den Kippschalter jedes Mal neu rendern, wenn sich der überprüfte Wert ändert

  const handleChecked = e =>
    handleSwitch(e);
    onChange(convertToEventParams(name, (checked === false ? 1 : 0))); // True/False in 1/0-Wert konvertieren
  };

  zurückkehren (
    <Box>
      <Typografie>
        {label1}
        {<Umschalten
          name={name}
          checked={checked}
          value={checked}
          onChange={handleChecked}
          inputProps={{'aria-label': 'switch'}}
        />}
        {label2}
      </Typografie>
    </Box>
  );
}

Answer 1

你正在处理ToggleSwitch组件中的状态和选中值。你既有本地状态（checked），又有一个prop（value），你想要将它们同步。

要解决这个问题，确保开关和值正确同步

你正在从父组件传递value prop，你可以直接使用该prop来确定开关的状态。 你可以通过删除不必要的状态和效果来简化组件代码。

你可以直接使用value prop来确定开关的初始状态，并使用onChange函数更新父组件。

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