TextInputでの入力不具合を解決したい

Question

前提・実現したいこと

React Nativeを利用してアプリの開発をしています。

下記の３つの要素が1組となるコンポーネントがあります。

各コンポーネントは配列で管理され、それぞれのTextInputで入力された値は、コンポーネントと同じindexで管理する配列で、追加、削除の管理がされます。

• TextInput
• Button(追加)
• Button(削除)

追加ボタンを押すと、コンポーネントが追加され、削除を押すと削除されます。

発生している問題・エラーメッセージ

コンポーネントの追加、削除は問題なく機能するのですが、それぞれのTextInputの欄で、テキストを入力する際に動作がおかしくなります。

症状は、1文字入力すると、カーソルが入力欄から消えてしまい、次の文字を入力するには、再度カーソルを当て直す必要があり、通常のように連続して入力ができません。

なお、入力されたテキストは、配列の値として保持されます。

こちらの症状の解決の方法について、ご存知の方おりましたら、ご教授いただけないでしょうか？

該当のソースコード

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="追加"
        onPress={() => {
          handleAdd();
        }}
      />
      <Button
        title="削除"
        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",
  },
});

補足情報（FW/ツールのバージョンなど）

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

以下ようにhandleInputを変更する方法で新規に追加したコンポーネントの入力はできるようになりました。

しかし、すでに入力しているコンポーネントへの再編集ができない状態となります。

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

ここの場所を以下のようにする

function handleInput(index, text) {
    setNumber((v) => v.splice(index, 1, text));
  }

なお、stateの値を直接変更するのを避けるために、splice()の前に配列のコピーを動作をさせると、今回の問題は解決できませんでした。