Javascript ReactNative TextInput不允许我键入

适用于iOS和Android模拟器

当我开始打字时，文本消失/闪烁。我试着用一些有价值的文本的初始状态，而不是保持它为空。此时，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;

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

import React，{Component}来自'React'；
从“/common”导入{Card，Button，CardSection，Input}；
类LoginForm扩展组件{
状态={电子邮件：''，密码：'}
render（）{
返回(
this.setState（{email:text}）
值={this.state.email}
/>
this.setState（{password:text}）}
值={this.state.password}
/>
登录
);
}
}
导出默认登录信息；

Input.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;

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

从“React”导入React；
从“react native”导入{TextInput，View，Text}；
常量输入=（{label，value，onChangeText，占位符，secureTextEntry}）=>{
const{inputStyle，labelStyle，containerStyle}=样式；
返回(
{label}
);
};
常量样式={
输入样式：{
颜色：“#000”，
paddingRight:5，
paddingLeft:5，
尺码：18，
线高：23，
弹性：2
},
标签样式：{
尺码：18，
paddingLeft:20，
弹性：1
},
集装箱运输方式：{
身高：40，
弹性：1，
flexDirection:'行'，
对齐项目：“中心”
}
};
导出{输入}；
您的问题是如何编写
输入组件。

无状态组件内部编写了一个
render
函数，该函数不是React
类
组件：

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}）=>（//← 移除包装括号
{
render（）{//{
const{inputStyle，labelStyle，containerStyle}=样式；
返回(
{label}
);
};

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

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

它不应该是
onChangeText={e=>this.setState（{password:e.target.value}）吗
？抱歉，刚才注意到您正在使用
TextInput
from
react native
@Sagivb.g。没问题。如果问题有任何误导性的内容或标记，请告诉我。我会将
onChangeText
提取到类方法并调试/记录更改，以确保您返回正确的值，并确保问题得到解决由于状态未更新发现您的问题，您的
输入组件以错误的方式编写。我将回答您的问题。根据您的建议进行了更改，但这不起作用。问题仍然是一样的。感谢您的努力！奇怪的是，您的代码在代码沙盒中为我工作。我将尝试发布一个堆栈片段，但我无法发布找不到
react native
cdn文件，因此我发布了一个指向代码沙盒项目的链接。您可以看到您的代码和我所做的更改有什么不同（尽管我所做的所有更改都发布在我的答案中）在代码沙盒项目中看到了它。我很高兴它至少在那里工作。非常奇怪，我无法在我的项目中实现同样的效果。我确实用你的建议替换了我的代码。这非常奇怪。请注意更改，删除最外层的括号
（）
，并删除
渲染
及其大括号
渲染{}
。当我按原样运行您的代码时，这是唯一的问题为什么这样做？我以前有
value={this.state.email}
，然后添加
.value
，然后它开始工作。react native是否将
.value
添加到状态中的每个键或其他东西？我从来没有遇到过常规react的问题