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

Question

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

在formy-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}
/>