当我尝试将它添加到材质 UI 开关时，React typescript onChange 显示错误

Question

I am planning to do a show and hide using switch. When I turn on the switch it need to show the component and when I turn odd the switch it need to hide the component.

This is the coding I did.

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

But when I add like this I am getting an error in onChange . This is the error I got

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.

This is the created switchWithLable component

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

Can any one help me to achieve the goal. I tried multiple time and still showing the error.

Answer 1

You don't need to have event: React.ChangeEvent<HTMLInputElement> . You can change the state of the switch with simple function.

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

Complete code =>

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