每次击键后 TextInput 都会失去焦点 react-native

Question

我有以下代码（完整示例）：

import React, { useState, useEffect } from 'react';
import { SafeAreaView, View, TextInput, Button, StyleSheet } from 'react-native';

const App = () => {
  const [textblocks, setTextblocks] = useState([]);
  const CreateTextBlockHandler = () => {
    let array = [...textblocks];
    array.push({text: ''});
    setTextblocks(array);
  };
  const SaveTextHandler = (index, text) => {
    let array = [...textblocks];
    array[index].text = text;
    setTextblocks(array);
  };
  const RenderTextInputs = () => {
      return textblocks.map((item, index) => {
        return (
          <View key={index}>
            <TextInput style={styles.textinput} placeholder="text" value={textblocks[index].text} onChangeText={value => SaveTextHandler(index, value)} />
          </View>
        );
      });
  };
  return (
    <SafeAreaView style={styles.pancontainer}>
      <RenderTextInputs />
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  pancontainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  textinput: {
    width: 200,
    margin: 10,
    borderWidth: 1,
    borderColor: 'black'
  }
});

export default App;

它是如何工作的：我有一个按钮来动态添加一个新的文本输入。这有效。问题是，对于我在文本输入中输入的每个字符，焦点在每个字符后丢失。

我创建了一个小吃，你可以在这里测试：https : //snack.expo.io/BJcHxluyI。

我认为我需要在某处保存对 textinput 的引用，然后在每次击键后将焦点返回给 textinput，但我不知道该怎么做。

Answer 1

改变

return (
    <SafeAreaView style={styles.pancontainer}>
      <RenderTextInputs />
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );

到

return (
    <SafeAreaView style={styles.pancontainer}>
      {RenderTextInputs()}
      <Button title="Create textblock" onPress={CreateTextBlockHandler} />
    </SafeAreaView>
  );

或者放在RenderTextInputs外面App并通过道具传递数据。使用第一种语法，react 将其RenderTextInputs视为一个组件，并且由于它嵌套在 中App，因此会在每个 App 渲染器上再次安装它。