TextInput 中的每次按键后键盘都会关闭本机反应答案

【问题标题】：Keyboard closes after every keypress in TextInput react nativeTextInput 中的每次按键后键盘都会关闭本机反应
【发布时间】：2022-01-19 16:12:12
【问题描述】：

我正在开发一个 react-native 应用程序，在该应用程序中我遇到了 TextInput 问题。

每当我按下键盘上的一个键时，键盘就会关闭。

我尝试过使用不同的文本输入组件，例如材料文本输入和“react-native-elements”输入。但是同样的问题也存在。

stackexchange 上有类似的问题，但他们都试图在 TextInput 中解决这个问题。但是，问题不在于 TextInput，而在于 TextInput 的实现。

我已将代码简化为：

import React, {useState} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

const App = () => {
  const [additionalComments, setAdditionalComments] = useState("");

  const StarFeedback = () => {
        return (
            <TextInput
              placeholder="Additional Comments"
              onChangeText={text => setAdditionalComments(text)}
              value={additionalComments}
            />
        )
  }
  

  return (
    <View>
      <StarFeedback/>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
});

小吃链接：https://snack.expo.dev/@rachitkohli/634602

【问题讨论】：

检查这个stackoverflow.com/questions/59891992/…>

标签： react-native keypress textinput

【解决方案1】：

您不应在每个输入上使用value 属性。使用useRef 并使用onEndEditing 存储值会更好（减少重新渲染）。


import React, {useState, useRef, useCallback } from 'react';
import { Text, View, StyleSheet, TextInput, } from 'react-native';

const App = () => {
    const [additionalComments, setAdditionalComments] = useState("");

    const inputEl = useRef(null);


    const handleInputSubmit = useCallback((ev) => {
        const input =  ev.nativeEvent.text;

    // validate all you want here

      setAdditionalComments(input)
    }, [setAdditionalComments]);

    const Aux = () => {
        return (
            <View style={{marginTop: 100}}>
                <TextInput
                    ref={ inputEl }
                    placeholder="Additional Comments"
                    onEndEditing={ handleInputSubmit }
                    defaultValue={additionalComments}
                />
            </View>
        )
  }
  
...

这样组件只会在当用户完成输入时更新。

例如，您可以使用onChange 显示警告标签（或用于预取搜索结果等）。但不值得为每个按键输入设置状态。

【讨论】：

感谢若昂的回答。您的答案有效，但是用户每次输入时都必须提交。这对用户来说是一个额外的步骤。但是，我想使用 onChangeText 让用户在不使用键盘上的提交按钮的情况下继续操作。但是当我使用 onChangeText 时，我面临同样的键盘关闭问题。你能告诉我如何解决吗？谢谢！！
只需将 TextInput 组件上的 onEndEditing 更改为 onChangeText。顾名思义：最后运行一次，每次用户更改输入时运行一次。您可以在我的回答中使用handleInputSubmit 作为起点

【解决方案2】：

import React, {useState, useCallback} from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';

  const Aux = () => {
    const [additionalComments, setAdditionalComments] = useState("");

    const handleAdditionalCommentsChanged = (text) => {
      setAdditionalComments(text);
    };

        return (
          <View >
            <TextInput
              placeholder="Additional Comments"
              onChangeText={handleAdditionalCommentsChanged}
              value={additionalComments}
            />
          </View>
        )
  }
  

const App = () => {

  return (
    <View>
      <Aux/>
    </View>
  );
};

export default App;

Aux 组件在 App 组件内声明，additionalComments 是 App 组件的状态，因此每次传递给它的 prop 发生变化时都会刷新。

【讨论】：