如何在React上启用/禁用自定义验证按钮

时间:2018-07-24 20:35:20

标签: javascript reactjs antd

我有一个简单的表单,带有3个输入和一个按钮。

默认情况下,“提交”按钮处于禁用状态,并且每个输入都具有使用正则表达式的自定义验证逻辑。

所有验证通过后,如何再次启用该按钮?

这是我的组件:

Proper (pointwise_relation A eq ==> eq) (@all A)

更新:

应使用ant design API提供答案

4 个答案:

答案 0 :(得分:1)

按钮的禁用值是来自组件状态的布尔值。

因此,所有检查都通过后,您需要将boolean设置为false:

this.setState({buttonDisabled: false})

答案 1 :(得分:1)

为您的状态添加一个布尔值,即isValidated,默认为false,当所有验证通过时,您将更改为true。您已经使用state.buttondisabled进行了此操作-当所有验证都通过时,只需setStatefalse

答案 2 :(得分:1)

在每个验证器ViewController块中,将if状态设置为buttonDisabledState,在每个true语句中将其设置为else

通过所有字段验证后,您的btn禁用状态将设置为false。

答案 3 :(得分:-1)

请看一下本节,希望它将解决您的问题 https://ant.design/components/form/#Form.Item