在React Native中使用可重用组件后，数据未使用onDataChange更改

Question

I created a reusable component Text input and I want to do a simple validation but i cant get the input value as it always showing null.

This is where I am getting my username and password

                <LoginTextBox placeholderName='Email'
                  value={this.state.username}
                  onChangeText={(username) => this.setState({ username })}
                ></LoginTextBox>
                <LoginTextBox placeholderName='Password'
                 value={this.state.password}
                 onChangeText={(password) => this.setState({ password })}
                ></LoginTextBox>
                <TouchableOpacity 
                onPress={this.onLogin}>

This is where I created LoginTextBox

    render() {
  return (
       <TextInput
        placeholder={this.props.placeholderName}
        style={styles.input}>{this.props.value}</TextInput>
  );
}

Following is my validation

  onLogin=()=> {
const { username, password } = this.state;
if (username.match("bhaskarj61@gmail.com")) {
this.props.navigation.navigate('NewsFeed');
}
else {
  Alert.alert('enter valid email')
}

}

Answer 1

onChangeText -attribute never gets attached to your TextInput -component.

You could do something similar like this.

LoginTextBox -component render-method

render(){ 
  return(
     <TextInput
      {...this.props}
      placeholder={this.props.placeholderName}
      style={styles.input}>{this.props.value}</TextInput>
   )
}

and here {...this.props} on TextInput component passes your onChangeText listener to actual React Native -component.

In this case this would pass value , placeholderName and onChangeText attributes to actual component. You could this way also shorthand placeholderName to just use placeholder .