React-Native 中的必填字段答案

【问题标题】：Required fields in React-NativeReact-Native 中的必填字段
【发布时间】：2019-06-12 00:43:42
【问题描述】：

我正在检查一些用户输入值，如果它们为空，如果是，那么我循环它们的标题（文本输入标题）并检查它们是否包含“*”。如果他们这样做，我会向用户显示一条消息。但是，由于某些原因，我的方法并没有真正奏效。即使用户没有填写必填字段，它也会继续下去。我在这里做错了什么？

for (i = 0; i < this.myInputFields.myTextFields.length; i++) {
            data[this.myInputFields.myTextFields[i].key] = this.myInputFields.myTextFields[i].inputValues; //there is a bug here, if user doesnt fill the first textinput it will fail to send

            if (this.myInputFields.myTextFields[i].inputValues === '') {
                if (this.myInputFields.myTextFields[i].title.every('*')) {
                    return Alert.alert('Please fill out the required fields!')
                }
            }
        }

如果用户在第一个 TextInput 中没有输入，则操作失败并显示错误，指出“this.myInputFields.myTextFields[i].key”未定义。它显然失败了，因为它发现数组是空的，实际上它希望有一个值。但是，即使一个是空的，我怎样才能让它继续呢？

【问题讨论】：

你能显示组件的所有代码吗
您的输入是受控还是不受控的组件？如果您可以共享整个组件，那么提供帮助会容易得多。
可能是因为您正在与'' 进行严格比较。如果这些值未初始化为空字符串，则断言将失败并且内部块将永远不会执行
这种检查方法是什么样的？可能只是 return Alert.alert('Please fill out the required fields!') 不足以停止操作。无论验证返回值如何，也可能是您调用屏幕转换。请注意，重新运行 Alert.alert() 基本上是返回未定义的，所以如果那是你想要的，请确认
Trevor 提出了一个很好的观点，你应该使用像 export function isEmpty(str) { if (str && str.replace(/\ /g, '') !== '') return false; else { return true; } } 这样的空检查器来真正检查空字段

标签： react-native field user-input textinput required

【解决方案1】：

您正在将this.myInputFields.myTextFields[i].inputValues 的值与'' 进行显式比较。如果inputValues 不是''，这将失败。（例如undefined）

...
if (this.myInputFields.myTextFields[i].inputValues === '')
...

相反，只需检查虚假性：

...
if (!this.myInputFields.myTextFields[i].inputValues)
...

【讨论】：

我不能，因为当我将用户输入值推送到数组时，我只推送用户填写的值，而不是那些留空的值。所以循环只会通过那些已经填写的循环，因此它不会找到任何空的！如果我将所有文本输入（空的和填充的）推送到数组中，问题将得到解决，这样我就可以检查哪个是空的并提醒用户。