Question

我刚创建了一个登录表单并对其进行了验证，但未找到如果验证失败，如何禁用提交中的提交按钮。我这里没有使用任何类型的库，只是尝试阻止按钮在本机中提交，如果在本地响应中有任何有价值的表单处理链接。

对此有任何帮助将不胜感激。

Answer 1

您可以在提交按钮的onPress功能中执行此操作：

if (validation is successful)
    submit
else
    Do nothing

这是一种非常简单的方式，其他人可能有不同的答案。

Answer 2

提交后，您可以检查验证是否成功，如果没有，则忽略或弹出警告以告知用户错误..

onSubmit = () => {
  if(validationSuccess) {
    //navigate to next screen component
  } else {
    //Alert to user
  }
}

或者如果你在渲染中进行了更改onChange，你仍然可以做if else条件使你的提交按钮变成灰色而不是可点击的

render() {
  return (
   ....

   {this.state.validationSuccess ? (
      <TouchableHighlight onPress={() => this.onSubmit()}>
        <Text>LOGIN</Text>
      </TouchableHighlight>
   ) : (
      <View style={{ backgroundColor: 'grey'}}>
        <Text>LOGIN</Text>
      </View>
   )}      

   ....
  )
}

毕竟，还有其他方法可以做到这一点，但这是一些例子..希望能帮助你开始......快乐探索！

响应原生

2 个答案: