javascript - React typescript onChange viser fejl, når jeg prøver at tilføje det til Material UI switch

Jeg planlægger at lave en vis-og-skjul med en kontakt. Når jeg tænder kontakten, skal komponenten vises, og når jeg slukker kontakten, skal komponenten skjules.

Dette er den kodning, jeg lavede.

export const VirtualEventSection = ({
  control,
  onSearch,
  onSearchInputChange,
  searchInputValue,
  }: VirtualEventSectionProps) => {
  const { formatMessage } = useLocale();
  const styles = useStyles();
  const [state, setState] = useState(false);

  const handleSwitchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState(event.target.checked);
  };

  return (
    <Card className={styles.actionCard}>
      <Grid container spacing={1} alignItems="flex-start">
        <Grid item sm={12} xs={12}>
          <SwitchWithLabel
            name="virtualEnabled"
            label={formatMessage({ id: 'form_event.event_toggle_lable' })}
            control={control}
            checked={state}
            onChange={handleSwitchChange}
          />
          {state && state === true ? (
            <LocationSelection
              control={control}
              onSearch={onSearch}
              onSearchInputChange={onSearchInputChange}
              searchInputValue={searchInputValue}
            />
          ) : (
            <h1></h1>
          )}
        </Grid>
      </Grid>
    </Card>
  );
  };

Men når jeg tilføjer sådan her, får jeg en fejl i onChange. Dette er den fejl, jeg fik

Type '(event: React.ChangeEvent<HTMLInputElement>) => void' is not assignable to type '({ name, checked }: OnChangeProps<"virtualEnabled">) => void'. Types of parameters 'event' and '__0' are incompatible.Type 'OnChangeProps<"virtualEnabled">' is missing the following properties from type 'ChangeEvent<HTMLInputElement>': target, nativeEvent, currentTarget, bubbles, and 11 more.

Dette er den oprettede switchWithLable komponent

export const SwitchWithLabel = <T extends string = string>({
  label,
  name,
  control,
  ...switchProps
}: SwitchWithLabelProps<T>) => {
const styles = useStyles();

return (
  <Controller
    name={name}
    control={control}
    render={({ value, onChange }) => (
      <FormControlLabel
        className={styles.label}
        label={label}
        control={
          <Switch
            name={name}
            onChange={async ({ checked }) => {
              onChange(checked);
            }}
            checked={value}
            {...switchProps}
          />
        }
      />
    )}
  />
);
};

Kan nogen hjælpe mig med at nå målet. Jeg har prøvet flere gange, og det viser stadig fejlen.

Svar #1

Du behøver ikke at have event: React.ChangeEvent<HTMLInputElement>. Du kan ændre tilstanden af kontakten med en simpel funktion.

const handleSwitchChange = () => {
  setState(!state);
};

Komplet kode =>

export const VirtualEventSection = ({
  control,
  onSearch,
  onSearchInputChange,
  searchInputValue,
}: VirtualEventSectionProps) => {
const { formatMessage } = useLocale();
const styles = useStyles();
const [state, setState] = useState(false);

const handleSwitchChange = () => {
  setState(!state);
};

return (
  <Card className={styles.actionCard}>
    <Grid container spacing={1} alignItems="flex-start">
      <Grid item sm={12} xs={12}>
        <SwitchWithLabel
          name="virtualEnabled"
          label={formatMessage({ id: 'form_event.event_toggle_lable' })}
          control={control}
          checked={state}
          onChange={() => handleSwitchChange()}
        />
        {state && state === true ? (
          <LocationSelection
            control={control}
            onSearch={onSearch}
            onSearchInputChange={onSearchInputChange}
            searchInputValue={searchInputValue}
          />
        ) : (
          <h1></h1>
        )}
      </Grid>
    </Grid>
  </Card>
);
};

Relaterede artikler