仅在输入有效时提交 onBlur 函数

【问题标题】：Submit onBlur function only when the input is valid仅在输入有效时提交 onBlur 函数
【发布时间】：2019-05-02 13:32:33
【问题描述】：

我正在使用来自 formsy-semantic-ui-react 的输入进行表单验证，如何仅在字段有效时运行 onBlur 函数？

formsy-react 中有一个isValid() 函数，this.props.isValid() 但是我如何在来自 formsy-semantic-ui-react 的输入中调用这个函数？

我该怎么做，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}
/>

【问题讨论】：

标签： reactjs semantic-ui-react formsy-react

【解决方案1】：

要获得这样的行为，您必须创建自己的组件来管理它。使用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}
/>

【讨论】：