与 Typescript 反应 - 键入 ChangeEvent 时出现问题

Question

I've been learning react with typescript for a while and ran into a problem.
My prop onChangeHandler takes a function to change properties in values in formik.

<Formik<FormModel>
        initialValues={{
            favorite: false
            ...
        }}

        onSubmit={(values) => {
            ...
        }}

        validate={(values) => {
            ...
        }}
    >
        {({ handleSubmit, values, handleChange, setFieldValue, errors }) => {

            const checkboxOnChange = (
                e: ChangeEvent<HTMLInputElement>
            ) => {
                setFieldValue("favorite", e.target.checked);
            };

            return (
                <Form.Wrapper onSubmit={handleSubmit}>
                    
                   ...

                    <FormField
                        ...
                        inputtype="checkbox"
                        inputname="favorite"
                        inputchecked={values.favorite}
                        onChangeHandler={checkboxOnChange}
                    />

                    <Form.Button type="submit">Add task</Form.Button>
                </Form.Wrapper>
            );
        }}
    </Formik>

In my FormField compoentent file is:

type FormFieldTypes = {
fieldtype: "text" | "textarea" | "date" | "select" | "checkbox";
...
inputtype: string;
inputname: string;
inputchecked?: boolean;
onChangeHandler: (
    e:
        | React.ChangeEvent<HTMLInputElement>
        | React.ChangeEvent<HTMLTextAreaElement>
        | React.ChangeEvent<HTMLSelectElement>
) => void;
...
};


 const FormField = ({
  fieldtype,
  inputtype,
  inputname,
  inputvalue,
  inputchecked,
  onChangeHandler,
  ...
 }: FormFieldTypes) => {

  const input = () => {
    switch (fieldtype) {

        ...

        case "checkbox":
            return (
                <Input
                    name={inputname}
                    type={inputtype}
                    checked={inputchecked}
                    onChange={onChangeHandler}
                />
            );

        default:
            return null;
    }
};

return (
    <Field fieldtype={fieldtype} ...>

        {input()}
        ...
    </Field>
);
};

export default FormField;

`

my question is why am I getting error "Type '(e: ChangeEvent <HTMLInputElement>) => void' is not assignable to type '(e: ChangeEvent <HTMLInputElement> | ChangeEvent <HTMLTextAreaElement> | ChangeEvent <HTMLSelectElement>) => void'. " if I have implemented ChangeEvent <HTMLInputElement> and if checkbox is input and what do i need to change in the code to make it work.

Answer 1

ok, i don't know what is the best solution for this, but i think there's some logic we can sort out first.

The three options are not

(
    e:
        | React.ChangeEvent<HTMLInputElement>
        | React.ChangeEvent<HTMLTextAreaElement>
        | React.ChangeEvent<HTMLSelectElement>
) => void

which is only one option, the real three options that you want to supply to it is:

  (React.ChangeEvent<HTMLInputElement>) => void |
  (React.ChangeEvent<HTMLTextAreaElement>) => void |
  (React.ChangeEvent<HTMLSelectElement>) => void

I think this is the main issue i found. Basically you have three choices of events instead of one function with three different inputs.