Question

我正在研究ReactNative应用程序。我有一些输入字段，如果这些字段中的任何一个为空，请单击按钮，我必须显示验证错误。我的代码是：

<View>
        <InputField placeholder="Teilnummer"
          onChangeText={(nm)=>  this.setState({pTeilnummer: nm})}
        />
        <View>
        {
          this.state.ErrorTeilnummer ? <Text style={styles.ValidationErrorMessage}> * Required </Text> : null
        }
        </View>

        <InputField placeholder="Teilbenennung"
          onChangeText={(nm)=>  this.setState({pTeilbenennung: nm})}
        />
        <View>
        {
          this.state.ErrorTeilbenennung ? <Text style={styles.ValidationErrorMessage}> * Required </Text> : null
        }
        </View>

        <InputField placeholder="Lieferant"
          onChangeText={(nm)=>   this.setState({pLieferant: nm})}
        />
        <View>
        {
          this.state.ErrorLieferant ? <Text style={styles.ValidationErrorMessage}> * Required </Text> : null
        }
        </View>

<Button title="Speichern" color="#ee7100" onPress={() => { this._addProject(this.state.pTeilnummer +  "_" + this.state.pTeilbenennung + "_" +  this.state.pLieferant, this.state.pdate)}}/>
</View>

我将这些状态声明为：

constructor(props){
this.state = {ErrorTeilbenennung: false, ErrorTeilnummer: false, ErrorLieferant: false pTeilbenennung: null, pTeilnummer: null, pLieferant: null};

我的按钮点击代码是：

_addProject = (name, date) =>{

  teilbenennung = this.state.pTeilbenennung;
  teilnummer = this.state.pTeilnummer;
  lieferant = this.state.pLieferant;
  var selectedCheck = this.state.addCheck

  if(teilbenennung == null || teilnummer == null || lieferant == null)
  {
    if(teilbenennung == null)
      this.setState({ErrorTeilbenennung: true})
    else
      this.setState({ErrorTeilbenennung: false})

    if(teilnummer == null)
      this.setState({ErrorTeilnummer: true})
    else
      this.setState({ErrorTeilnummer: false})

    if(lieferant == null)
      this.setState({ErrorLieferant: true})
    else
      this.setState({ErrorLieferant: false})
  }
  else
  { // saving to database
  }
}

当我第一次单击该按钮时，出现所需的验证错误。但是，当我在第一个InputField中键入内容并按下按钮后，我仍然收到针对该字段的验证错误（“ onChangeText”可能存在问题），但是如果我再次单击该按钮，则针对该字段的验证错误被删除（我的意思是我必须单击两次）。让我再添加一件事，当我单击InputField在其中写一些东西时，组件将重新加载。我该如何删除此问题，以便单击即可正常工作

Answer 1

问题是我的视图位于 KeyboardAwareScrollView 内部，所以第一次单击会关闭键盘，这就是为什么我的按钮单击不会在第一次单击时触发的原因。这可以通过两种方式解决：

使用 ScrollView 代替 KeyboardAwareScrollView
将 keyboardShouldPersistTaps 设置为 true ，如下所示：

<KeyboardAwareScrollView keyboardShouldPersistTaps={true}>

Answer 2

我举了一个例子来解决您的问题。这就是您要解决的问题的方式。

分别比较状态值是一种非常不方便的方法。我们可以通过onChangeText

来充分解决此问题

示例在此处ExampleLink

import React, { Component } from 'react';
import { AppRegistry, TextInput,View,Text,Button } from 'react-native';

export default class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      text: '',error1 : "error1" ,
     text2: '',error2 : "error2" };
  }

  checkfunc() {
    if(this.state.text !== '' && this.state.text2 !== ''){
      alert("sucess");
    } else {
      alert("faild");
    }
  }

  render() {
    return (
      <View style={{flex:1,alignItems:"center" , justifyContent:"center"}}>
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
      {this.state.text !== ''  ? null : (<Text>{this.state.error1}</Text>)}
      <TextInput
        style={{height: 40, borderColor: 'gray', borderWidth: 1}}
        onChangeText={(text2) => this.setState({text2})}
        value={this.state.text2}
      />
      {this.state.text2 !== ''  ? null : (<Text>{this.state.error2}</Text>)}
      <Button title="checkinput" onPress={() => this.checkfunc()}/>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

React Native中InputField的onChangeText问题

2 个答案: