避免使用多个状态

Question

我是新来的本地人。

我正在制作一个包含一些TextInputs的表单。

当用户点击“发布”按钮时，我会检查所有输入。如果输入正常 - >没有任何反应，如果输入包含错误 - ＆gt;该领域变红。

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

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

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

问题是我不想为每个输入创建一个特定的状态（titleColor，IDColor，descriptionColor等），如下所示：

titleColor: greyBlack,
IDColor: greyBlack,
descriptionColor: greyBlack

...当它们包含错误时将它们变为红色。

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

有人能帮助我吗？感谢。

Answer 1

您需要将州与州分开。输入是否有错误是状态;视图是否为红色。类似于{color: this.state.titleError ? errorColor : undefined }。

Answer 2

修改字段值后，将进行状态修改和重新渲染。为了获得颜色，您可以在渲染时动态调用验证函数。

以下是一个小例子 - https://codesandbox.io/s/4wx0xxv624

Answer 3

如果有很多textInput需要验证，可以考虑使用不同的验证规则为它们创建子组件，并让子组件根据验证结果控制样式。