处理输入错误

时间:2018-03-25 10:20:13

标签: javascript reactjs react-native

我是新来的本地人。

我需要创建用于管理产品的应用程序的前端部分。在此应用中,特定屏幕允许用户添加“新产品”。

我几乎完成了UI部分,但是当输入错误(缺少产品ID,少于10个字符的描述等)时,我现在需要向用户显示错误。

这是我的目标:当用户点击“发布”按钮时,我会检查所有输入。如果输入正常 - >没有任何反应,如果输入包含错误 - >该领域变红。

为实现这一目标,我需要与各州合作。这里应该是标题的一个例子:

style={[style.inputText, {color: this.state.titleColor}]} 

如果标题输入有问题,我可以更改state.TitleColor。

问题是我不想为每个输入创建一个特定的状态(titleColor,IDColor,descriptionColor等)。

如何为正确的输入执行公共状态,为输入错误做另一种状态?我想过使用一个数组(带有inputCorrect:[]; InputWrong:[]),但我不确切知道如何处理它。

有人能帮助我吗?感谢。

1 个答案:

答案 0 :(得分:0)

我建议您使用表单库来帮助您进行状态和验证。我个人喜欢formik,但我也听说过有关react-final-form的好消息(两者都与React Native兼容)。

这样的库可以更轻松地管理验证和输入状态,因为它们为您管理状态并告诉您的每个字段它们是否有效(如果需要,传递适当的错误消息)。

构建显示错误的UI仍然取决于您,但是掌握逻辑是一个巨大的帮助。 formik文档有一些很好的例子,向您展示如果该字段有错误,您将如何实现将字段颜色更改为红色的目标。

了解如何很好地使用这些库有一点学习曲线,但在我看来它非常值得。