Использование formik с машинописью (Ioni c) - PullRequest
Новая
       3

Использование formik с машинописью (Ioni c)

0 голосов
/ 01 апреля 2020

Я пытаюсь использовать библиотеку Formik для проверки форм, однако у меня возникают проблемы при передаче функции onChange моим компонентам ввода.

Вот основной компонент: 

    import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonTitle, IonButton, IonPage, IonList } from '@ionic/react';
import { useFormik } from 'formik';

import BasicInput from '../components/form/BasicInput';

const Login: React.FC = () => {

    const validate = (values: {
        name: string;
    }) => {
        const errors = {};
        if (!values.name) {

        }

        return errors;
    }

    const formik = useFormik({
        initialValues: {
            name: ''
        },
        validateOnChange: false,
        validateOnBlur: false,
        validate,
        onSubmit: values => {
            alert(JSON.stringify(values, null, 2));
        },
    })

    const {
        name
    } = formik.values

    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Login</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent>
                <IonList>
                    <BasicInput
                        id="name"
                        placeholder={"Your name"}
                        onChange={formik.handleChange}
                    />

                </IonList>

                <div>
                    <IonButton onClick={handleLogin}>
                        Done
                    </IonButton>
                </div>
            </IonContent>
        </IonPage>
    )
     }

    export default Login;

А вот мой ввод компонент: 

    import React from 'react';
import { IonInput, IonItem } from '@ionic/react';

const BasicInput: React.FC<{
    id: string,
    placeholder: string,
    onChange: () => any
}> = (props) => {
    return (
        <IonItem>
            <IonInput
                placeholder={props.placeholder}
                onIonChange={props.onChange}
            >

            </IonInput>
        </IonItem>
    )
}

export default BasicInput;

Ошибка, которую я получаю: «Тип» (eventOrPath: string | ChangeEvent) => void | ((eventOrTextValue: string | ChangeEvent) => void) 'нельзя назначить типу' () => любой '. " на моем onChange prop.

Как правильно объявить это для TS?

1 Ответ

1 голос
/ 01 апреля 2020

В сообщении указывается, где проблема.

В BasicInput вы определяете опору onChange: () => any. Но ясно, что вызываемая функция должна будет получить новое входное значение в качестве параметра и не должна ничего возвращать, поэтому определение вашего пропа должно быть примерно таким: 

{
    // ...
    onChange: (newValue: string) => void;
}

Но Если вы наведете указатель мыши на onIonChange опору <IonInput />, вы увидите, что переданная функция не получает строку в качестве параметра!

Это полное определение: https://github.com/ionic-team/ionic/blob/976e68da5b030baf26dc60034ff80d8db2cff8e6/core/src/components.d.ts#L4137

На самом деле запускает CustomEvent . Имея это событие e, вы можете получить доступ к входному значению через e.target.value.

Полный код становится таким: 

import React from 'react';
import { IonInput, IonItem } from '@ionic/react';

const BasicInput: React.FC<{
    id: string,
    placeholder: string,
    onChange: (newValue: string) => void
}> = (props) => {
    return (
        <IonItem>
            <IonInput
                placeholder={props.placeholder}
                onIonChange={(e) => props.onChange(e.target.value)}
            >

            </IonInput>
        </IonItem>
    )
}

export default BasicInput;
...