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

Question

我创建了一个可重用的组件Text输入，我想做一个简单的验证，但由于总显示为空，所以我无法获得输入值。

这是我获取用户名和密码的地方

                <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}>

这是我创建LoginLogBox的地方

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

以下是我的验证

  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永远不会附加到您的TextInput 。

您可以执行类似的操作。

LoginTextBox-组件渲染方法

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

这里的TextInput组件上的{...this.props}将您的onChangeText侦听器传递给实际的React Native组件。

在这种情况下，这会将value ， placeholderName和onChangeText属性传递给实际组件。 您也可以通过这种方式将placeholderName为只使用placeholder 。