javascript - React Native TextInput 不让我输入

Question

适用于 iOS 和 Android 模拟器

当我开始输入时，文本就消失/闪烁了。我尝试让文本的初始状态具有一定的值(value)，而不是将其保持为空。有了这个，TextInput 会保持这个初始状态，并且不会用输入的新文本更新自己。

我认为状态没有通过“onChangeText”属性更新，但我不完全确定。

人们似乎已经解决了这个问题，因为他们在代码中几乎没有拼写错误或遗漏的部分。但是我已经彻底检查了我的。

如果我遗漏了以下代码中的任何内容，请提供帮助。

LoginForm.js

import React, { Component } from 'react';
import { Card, Button, CardSection, Input } from './common';

class LoginForm extends Component {

  state = { email: '', password: '' }

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

        <CardSection>
          <Input
            secureTextEntry
            label="Password"
            placeHolder="password"
            onChangeText={text => this.setState({ password: text })}
            value={this.state.password}
          />
        </CardSection>

        <CardSection>
          <Button>
            Log In
          </Button>
        </CardSection>
      </Card>
    );
  }
}

export default LoginForm;

Input.js

import React from 'react';
import { TextInput, View, Text } from 'react-native';

const Input = ({ label, value, onChangeText, placeholder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;

  return (
    <View style={containerStyle}>
      <Text style={labelStyle}>{label}</Text>
      <TextInput
        secureTextEntry={secureTextEntry}
        placeholder={placeholder}
        autoCorrect={false}
        style={inputStyle}
        value={value}
        onChangeText={onChangeText}
      />
    </View>
  );
};

const styles = {
  inputStyle: {
    color: '#000',
    paddingRight: 5,
    paddingLeft: 5,
    fontSize: 18,
    lineHeight: 23,
    flex: 2
  },
  labelStyle: {
    fontSize: 18,
    paddingLeft: 20,
    flex: 1
  },
  containerStyle: {
    height: 40,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  }
};

export { Input };

Answer 1

解决此问题的唯一方法是使用下面的代码更改 TextInput 字段值的更新方式。

value={this.state.email.value}
value={this.state.password.value}