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

Question

我正在使用来自 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}
/>

Answer 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}
/>

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

Submit onBlur function only when the input is valid

reactjs

formsy-react

semantic-ui-react