reactjs - 在 React Native 中正确使用 onChangeText

Question

我对 React Native 相当陌生，并且在使用 onChangeText 时遇到问题。我正在尝试使用 TextInput 来输入单词并更新状态。当我使用 onChangeText 时，我一次只能输入 1 个符号，直到它重新呈现。我可以通过使用来保持值(value)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>

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

() => callFn相当于 () => {return callFn}所以你返回你的 setState 调用。您需要这里() => {callFn}

并删除 {this.state.text}来自您的<Text>标签，每次更改 state 时都会触发重新渲染