Question

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

formy-react中有一个isValid()函数，this.props.isValid()但在formy-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函数

1 个答案: