为啥 <TextInput/> 不显示正在输入的内容？

Posted 2023-03-14

【中文标题】为啥 <TextInput/> 不显示正在输入的内容？

【英文标题】：Why won't <TextInput/> display what's being typed?为什么 <TextInput/> 不显示正在输入的内容？

【发布时间】：2017-06-22 17:20:30

【问题描述】：

每当我在物理设备上单击第一个 <TextInput/> 框中的 Email 时，我都看不到正在输入的内容。只有当我按Next 转到Password 框时，我才能看到Email 框中输入的内容。为什么会这样？

这里是App.js：

import React, Component from 'react';
import View, StyleSheet from 'react-native';
import BackGround from './components/BackGround';

export default class App extends Component 
    render() 
        return(
            <View style=styles.back>
                <BackGround/>
            </View>
        );
    


const styles = StyleSheet.create(
    back: 
        flex: 1
    
);

这里是Login.js：

import React, Component from 'react';
import StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView from 'react-native';

class Login extends Component 
    constructor(props) 
        super(props);
        this.state = 
            text: ''
        ;
    

    updateTextInput = text => this.setState(text);

    render() 
        return(
            <KeyboardAvoidingView behavior="padding" style=styles.container>
                <View>
                    <TextInput
                        style=styles.input
                        returnKeyType="next"
                        keyboardType="email-address"
                        autoCorrect=false
                        onChangeText=this.updateTextInput
                        value=this.state.text
                    />

                    <TextInput
                        style=styles.input
                        returnKeyType="go"
                        secureTextEntry
                    />

                    <TouchableOpacity>
                        <Text style=styles.loginAndCA>Login</Text>
                    </TouchableOpacity>

                    <TouchableOpacity>
                        <Text style=styles.loginAndCA>Create Account</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    


const styles = StyleSheet.create(
    container: 
        padding: 20
    ,

    input: 
        backgroundColor: '#DAE5FF',
        paddingBottom: 20,
        padding: 20,
        paddingHorizontal: 15,
        marginBottom: 10,
        borderRadius: 15,
    ,

    loginAndCA: 
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps',
        paddingHorizontal: 10
    ,

    buttons: 
        paddingBottom: 50
    
);

export default Login;

这里是BackGround.js：

import React, Component from 'react';
import StyleSheet, Image, View from 'react-native';
import Login from './Login';

export default class BackGround extends Component 
    render() 
        return(
            <View style=styles.first>
                <Image style=styles.container source=require('../pictures/smoke.jpg')>
                    <View style=styles.second>
                        <Login/>
                    </View>
                </Image>
            </View>
        );
    


const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)',
        resizeMode: 'cover'
    ,

    first: 
        flex: 1
    ,

    second: 
       paddingTop: 290 // Moves both <TextInput> boxes down.
    
);

【问题讨论】：

你为什么把 作为图片标签的子标签？

【参考方案1】：

您需要将 value 和 onTextChange 属性传递给 TextInput。

https://facebook.github.io/react-native/docs/textinput.html

【参考方案2】：

你需要给它一个连接到状态的值，并且随着文本输入的变化，你更新状态值：

export default class TextInputExample extends Component 
  constructor(props) 
    super(props);
    this.state = 
      text: ''
    ;
  
  updateTextInput = text => this.setState( text )

  render() 
    return (
      <View style= flex: 1>
        <TextInput
          style=height: 40
          placeholder="Type here!"
          onChangeText=this.updateTextInput
          value=this.state.text
        />
      </View>
    );
  

【讨论】：

抱歉，我刚刚意识到我忘了给 textInput 添加值。如果仍然遇到问题，请尝试并发布更新后的代码。