2017-03-09 32 views
0

我是React-Native的新手,所以我一直在通过教程来创建一个登录屏幕。本教程中的代码已过时。我正在创建一个由几个组件组成的登录屏幕。但是,模拟器中没有显示某个TextInput。这里的父组件“LoginForm的”从LoginForm1.js:文字输入没有显示在iOS模拟器

export default class LoginForm extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     text: '' 
    }; 
    } 


    render() { 
    return (
     <Card> 
     <CardSection> 
      <Input 
      placeholder="[email protected]" 
      label="Email" 
      value={this.state.email} 
      onChangeText={text => this.setState({ text })} 
      /> 
     </CardSection> 

的子组件“输入”被包裹在组件“CardSection”和“卡”(这些通过他们的道具与显示{this.props视图。儿童},但这里是从Input.js“输入”组件:

export default class Input extends Component { 
    render() { 
    return (
     <View style={styles.containerStyle}> 
     <Text style={styles.labelStyle}>{this.props.label}</Text> 
     <TextInput 
      placeholder={this.props.placeholder} 
      autoCorrect={false} 
      style={styles.inputStyle} 
      value={this.props.value} 
      onChangeText={this.props.onChangeText} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    inputStlye: { 
    color: '#000', 
    paddingRight: 5, 
    paddingLeft: 5, 
    fontSize: 18, 
    Height: 50, 
    Width: 50, 
    flex: 2, 
    }, 

此代码不抛出任何错误,但将TextInput从“输入”不显示我已经给它一些如果我用正常的文本替换TextInput,那么Text标签的内容将出现在模拟器中,我是否错过了与传递道具有关的东西?倪的帮助将不胜感激,谢谢!

回答

0

您的值被传递为value={this.state.email},但您正在更新文本正在更新this.state.text所以只需将其更改为value={this.state.text}

+0

非常感谢!错过了。 –