React Native中TextInput每次输入后都会失去焦点

Question

React Native中TextInput每次输入后都会失去焦点

5

I have the following code (full example):

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。

我认为我需要在某个地方保存文本框的引用，然后在每次按键后重新将焦点放回到文本输入框，但我不知道该怎么做。

- Sam Leurs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alexander Vidaurre Arroyo · Accepted Answer

改变

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之外，并通过props传递数据。对于第一个语法，React将RenderTextInputs视为组件，并在每次App渲染时作为嵌套组件重新挂载。