在 React Native 中正确使用 onChangeText

Question

我是 React Native 的新手，我在使用 onChangeText 时遇到了问题。我正在尝试使用 TextInput 输入单词并更新状态。当我使用 onChangeText 时，我一次只能输入 1 个符号，直到它重新呈现。我可以通过使用保留值， value = {this.state.text}但每次写信时输入字段仍然失去焦点。

我也尝试过使用 onBlur 和 onSubmitEditing 但没有成功。

这是我目前的代码。这是在 render() 里面。

 <View style={{padding: 10}}>
   <TextInput
    onChangeText={(text) => { this.setState({text: text})} }
    />
    <TouchableHighlight style={styles.button} onPress={this.handlePress.bind(this)}>
         <Text style={styles.buttonText}>Login</Text>
       </TouchableHighlight>
            <Text style={{padding: 10, fontSize: 42}}>
      {this.state.text}
    </Text>
  </View>

因此，通过使用这种方法，我目前一次只能写一个字母，因为 this.state.text 一次只能包含一个字母。

任何帮助表示赞赏。

例子

解决了

我使用 react-native-tab-view 使用它自己的路由器。我的代码是这样写的 ，正如你所看到的，渲染部分发生在 return() 之外。这就是导致我的问题的原因。我已经删除了 react-native-tab-view 并像这样重写了它

Answer 1

尝试使用这个完整的组件希望这对你有帮助。

'use strict';

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

class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            text:''
        };
    }

    render() {
        let {text}=this.state;

        return ( 
            <View style={{padding: 10}}>
                <TextInput onChangeText={(text) => { this.setState({ text: text})}}/>
                    <Text style={{padding: 10, fontSize: 42}}>
                    {text}
                    </Text>
            </View>
        )
     }
  }

  export default Home;