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一次只能包含一个字母。

任何帮助表示赞赏。

Example

已解决

我使用了react-native-tab-view，它使用了它自己的路由器。我将代码写为this 如您所见，渲染部分发生在return（）之外。那就是造成我问题的原因。我删除了react-native-tab-view并将其重写为this

Answer 1

<TextInput style={styles.input}
     placeholder='username'
     onChangeText={(text) => { this.setState({ username: text})}}>
</TextInput>

您需要{ }打开和关闭功能块，否则它将返回setState

() => callFn与() => {return callFn}等效，因此您返回setState调用。您需要在这里() => {callFn}

并从{this.state.text}标记中删除<Text>，每次更改state时都会触发重新渲染

Answer 2

尝试使用此完整组件希望对您有帮助。

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

Answer 3

在组件prop中创建函数不是最佳实践。即使由于prop值是一个新函数而未进行任何更改，这始终将强制重新渲染。这样尝试。我还给您提供了一种方法，可以通过使用“ currying”来创建多个文本输入而不创建单个内联函数，并且使它们成为受控输入，从而使它们的值由状态“控制”。 React中的社会主义！

12.cpp.exe

在React Native中正确使用onChangeText

3 个答案: