Отправить функцию onBlur только тогда, когда ввод действителен - PullRequest
Новая
       25

Отправить функцию onBlur только тогда, когда ввод действителен

0 голосов
/ 02 мая 2019

Я использую входные данные от formsy-semantic-ui-реакции для проверки формы, и как я могу запустить функцию onBlur, только когда поле является действительным?

В формах есть функция isValid()реагировать, this.props.isValid() но как я вызываю эту функцию во входных данных от Formy-Semantic-UI-реагировать?

как я могу сделать что-то вроде, onBlur={isValid() ? this.updateValue : null}? 

<Form.Input
    instantValidation={false}
    name="input1"
    label="Input 1"
    validations="isNumeric"
    validationErrors={{
    isNumeric: "Enter numeric only"
    }}
    errorLabel={errorLabel}
    onBlur={this.updateValue}
/>

1 Ответ

0 голосов
/ 02 мая 2019

Чтобы получить такое поведение, вам нужно создать свой собственный компонент, который управляет этим.Используя компонент высшего порядка withFormsy, вы получите доступ к функции isValid.

Это всего лишь пример, но он должен получить то, что вы хотите 

import { withFormsy } from 'formsy-react';
const MyInput = withFormsy(({ onValidUpdate, ...otherProps }) => {
    const onBlur = (event) => {
        if (otherProps.isValid()) {
            onValidUpdate()
        }
    }

    return (
        <Form.Input {...otherProps} onBlur={onBlur} />
    )
})

И затем используйте компонент как 

const onValidUpdate = () => console.log('this will only be called when valid')

<MyInput
    name="email"
    label="Email"
    validations="isEmail"
    validationErrors={{ isEmail: 'Email not valid' }}
    errorLabel={errorLabel}
    onValidUpdate={onValidUpdate}
/>
...