onChangeText of InputField issue in React Native - react-native

Question

I am working on a ReactNative application. I have some input fields, on button click if any of these fields is empty i have to show validation error. My code is:
<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>
I have declared these states as:
constructor(props){
this.state = {ErrorTeilbenennung: false, ErrorTeilnummer: false, ErrorLieferant: false pTeilbenennung: null, pTeilnummer: null, pLieferant: null};
My button click code is:
_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
}
}
When i click on the button first time i get the required validation errors. But after i type something in the first InputField and presses the button, i still get the validation error against that field (may be there is some issue with "onChangeText"), but if i click the button again then the validation error against that field is removed (i mean i have to click twice). Let me add one more thing, when i click on the InputField to write something in it the component reloads. How can i remove this issue so that it works fine with single click

Answer 1

I made an example to solve your problem. This is how you solve the problem you want.
Comparing the status values separately is a very inconvenient way. We can solve this problem sufficiently through onChangeText
Example is here 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);

Answer 2

Issue was that my view was inside KeyboardAwareScrollView, so the first click closes the keyboard, that's why my button click does not trigger on first click. This can be resolved in two ways:
Use ScrollView instead of KeyboardAwareScrollView
Set keyboardShouldPersistTaps to true like this:
<KeyboardAwareScrollView keyboardShouldPersistTaps={true}>