我是新来的本地人。
我需要创建用于管理产品的应用程序的前端部分。在此应用中,特定屏幕允许用户添加“新产品”。
我几乎完成了UI部分,但是当输入错误(缺少产品ID,少于10个字符的描述等)时,我现在需要向用户显示错误。
这是我的目标:当用户点击“发布”按钮时,我会检查所有输入。如果输入正常 - >没有任何反应,如果输入包含错误 - >该领域变红。
为实现这一目标,我需要与各州合作。这里应该是标题的一个例子:
style={[style.inputText, {color: this.state.titleColor}]}
如果标题输入有问题,我可以更改state.TitleColor。
问题是我不想为每个输入创建一个特定的状态(titleColor,IDColor,descriptionColor等)。
如何为正确的输入执行公共状态,为输入错误做另一种状态?我想过使用一个数组(带有inputCorrect:[]; InputWrong:[]),但我不确切知道如何处理它。
有人能帮助我吗?感谢。
答案 0 :(得分:0)
我建议您使用表单库来帮助您进行状态和验证。我个人喜欢formik,但我也听说过有关react-final-form的好消息(两者都与React Native兼容)。
这样的库可以更轻松地管理验证和输入状态,因为它们为您管理状态并告诉您的每个字段它们是否有效(如果需要,传递适当的错误消息)。
构建显示错误的UI仍然取决于您,但是掌握逻辑是一个巨大的帮助。 formik文档有一些很好的例子,向您展示如果该字段有错误,您将如何实现将字段颜色更改为红色的目标。
了解如何很好地使用这些库有一点学习曲线,但在我看来它非常值得。