如果有人触摸输入框并将其留为空白，我该如何使用本机响应来验证inputext（已修改）

Question

TextInput是React Native的组件

   <TextInput
     style={{height: 40, borderColor: 'gray', borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
      />

Answer 1

有两种验证类型。1，当您按某个按钮登录时，2，当您每次有人按下一个字符时验证文本输入时。您需要保存验证错误消息的状态。

<Button onPress={() => {
  if (this.state.text.trim() === "") {
    this.setState(() => ({ nameError: "First name required."}));
  } else {
    this.setState(() => ({ nameError: null}));
  }
}} title="Login">

现在，在此处显示文本输入的地方，您需要在其下方显示一个文本，该文本将在state的nameError属性不为null时显示，

<TextInput style={...} onChangeText={...} value={...} />
{!!this.state.nameError && (
  <Text style={{color: red}}>{this.state.nameError}</Text>
)}