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

Posted 2023-04-18

【中文标题】TextInput 中的每次按键后键盘都会关闭本机反应

【英文标题】：Keyboard closes after every keypress in TextInput react native

【发布时间】：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

【问题讨论】：

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

【参考方案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 发生变化时都会刷新。