TextInput /Input 元素失去对按键的关注

Question

我目前正在使用 React Native 开发应用程序。

这个试用版应用有一个组件，它有一个 TextInput 和两个按钮（添加和删除）。

当我按下添加按钮时，会出现一个新组件。如果我按下删除按钮，相同的组件就会消失。

屏幕如下图所示：

我使用与组件索引相同的索引来控制 TextInput。

---

我的问题是：为什么我不能像往常一样在这段代码中输入一些文字？

每次输入 1 个单词时，我都必须聚焦光标。

每次我按下一个键时，我都会在输入区域丢失一个闪烁的竖线（我在下面的照片中查看）。

我该如何解决这个问题？

而且，我想用 array[] 而不是 object{} 来控制 TextInput 的输入值，因为如果是数组，则更容易删除组件滑动索引和值，如下面的解释：

我不知道用对象来控制索引和值，现在这对我的技能来说很复杂，但是如果有一些很好的方法来解决使用对象，我希望知道。

---

代码如下：

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

function Item({ number, handleInput, handleAdd, handleDelete, index }) {
  return (
    <View style={styles.list}>
      <Text>{index}</Text>
      <TextInput
        style={{ borderWidth: 1 }}
        value={number[index]}
        onChange={(e) => {
          handleInput(index, e.nativeEvent.text);
        }}
      ></TextInput>
      <Button
        title="ADD"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="DELETE"
        onPress={() => {
          handleDelete(index);
        }}
      />
    </View>
  );
}

export default function TestStateArray() {
  const [count, setCount] = useState(1);
  const [number, setNumber] = useState([]);

  function handleAdd() {
    setCount((v) => v + 1);
  }

  function handleDelete(index) {
    setCount((v) => v - 1);
    setNumber((v) => {
      const ret = v.slice();
      ret.splice(index, 1);
      return ret;
    });
  }

  function handleInput(index, text) {
    setNumber((v) => {
      const ret = v.slice();
      ret[index] = text;
      return ret;
    });
  }

  return (
    <View>
      {Array.from({ length: count }, (_, i) => (
        <Item
          number={number}
          handleInput={handleInput}
          handleAdd={handleAdd}
          handleDelete={handleDelete}
          key={i + "-" + number}
          index={i}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    margin: 10,
    padding: 10,
    backgroundColor: "#ddd",
  },
});

---

在我得到一些答案和一些评论后，我尝试像下面这样更改代码，但它仍然有同样的问题......

// onChange={(e) => {
//   handleInput(index, e.nativeEvent.text);
      
onChangeText={(text) => {
  handleInput(index, text);
}}

---

节点：12.18.3

反应原生：4.10.1

世博会：3.22.3

Answer 1

出现上述问题是因为您的句柄更改功能错误。

请更改...

const [number, setNumber] = useState({}); // change array to Object in useState.

用下面的函数替换你的处理程序：

  function handleInput(index, text) {
    setNumber({ ...number, index: text });
  }

Answer 2

React Native 在 TextInput 组件上有 onChangeText 事件，你可以试试吗？