Question

适用于iOS和Android模拟器

当我开始输入时，文字就会消失/闪烁。我尝试了一些具有一定价值的文本的初始状态，而不是保持空白。有了这个，TextInput就会坚持这个初始状态，并且不会在输入新文本的情况下自行更新。

我认为该州没有使用＆amp; aChangeText＆＃39;更新财产，但我不完全确定。

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

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

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}

Answer 2

问题在于Input组件的编写方式在无状态组件内部编写了render函数，该函数不是React class组件：

const Input = ({ label, value, onChangeText, placeHolder, secureTextEntry }) => ( // ← remove the wrapping parentheses 
  {
    render() { // <--- this should not be here
      ↑
      const { inputStyle, labelStyle, containerStyle } = styles;
      return (
        <View style={containerStyle} >
          <Text style={labelStyle}>{label}</Text>
          <TextInput
            secureTextEntry={secureTextEntry}
            autoCorrect={false}
            placeholder={placeHolder}
            style={inputStyle}
            onChangeText={onChangeText}
            value={value}
            underlineColorAndroid="transparent"
          />
        </View>
      );
    }

  }
);

将其更改为：

const Input = ({ label, value, onChangeText, placeHolder, secureTextEntry }) => {
  const { inputStyle, labelStyle, containerStyle } = styles;
  return (
    <View style={containerStyle} >
      <Text style={labelStyle}>{label}</Text>
      <TextInput
        secureTextEntry={secureTextEntry}
        autoCorrect={false}
        placeholder={placeHolder}
        style={inputStyle}
        onChangeText={onChangeText}
        value={value}
        underlineColorAndroid="transparent"
      />
    </View>
  );
};

<强> See running example

ReactNative TextInput不允许我输入

2 个答案: