Question

我是React-Native的新手，所以我一直在通过教程来创建登录屏幕。本教程中的代码已过时。我正在创建一个由几个组件组成的登录屏幕。但是，某个TextInput未显示在模拟器中。这是LoginForm1.js中的父组件“LoginForm”：

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


  render() {
    return (
      <Card>
        <CardSection>
          <Input
          placeholder="user@gmail.com"
          label="Email"
          value={this.state.email}
          onChangeText={text => this.setState({ text })}
          />
        </CardSection>

子组件“Input”包含在组件“CardSection”和“Card”中（这些组件使用显示{this.props.children}的视图传递其道具，但这里是Input.js中的“Input”组件：< / p>

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标签的内容将出现在模拟器中。我错过了传递道具的事情吗？非常感谢任何帮助，谢谢！

Answer 1

您将值传递为value={this.state.email}，但您在onChangeText正在更新this.state.text，因此只需将其更改为value={this.state.text}。

文本输入未显示在iOS模拟器中

1 个答案: