ReactのTextInputコンポーネントでのテキスト入力の挙動がおかしくなる

Question

前提・実現したいこと

react nativeを利用してアプリを開発しています。

親コンポーネントから子コンポーネントへ、prppsでfunctionを渡して、テキスト入力の動きをさせています。

この際、通常のテキスト入力の方法になりません。
（1文字入力した後、再度カーソルをあてなければ、次のテキストを入力できない）

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

追記（最初の回答をいただいた後）

最初の回答を頂き下記のようにコードを変更しました。
コンポーネントの追加と、通常どおりの連続した入力ができるようになりました。

しかし、TextInputで入力したテキストがStateに保管されていない状態となってしまっています。
子コンポーネントのコード内の//①コンソールチェックの出力は、Object {}となってしまします。

ちなみに、子コンポーネントで入力した値と、親コンポーネントで利用したいため、子コンポーネントのStateの値は親からpropsで渡しています。

親コンポーネント

import React, { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import TestListInputItem from "../components/TestListInputItem";

export default function TestListScreen() {
  const [texts, setTexts] = useState({});

  return (
    <View style={styles.container}>
      <TestListInputItem texts={texts} setTexts={setTexts} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

子コンポーネント

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

function Item({ setText, handleMakeNew, i }) {
  return (
    <View style={styles.list}>
      <Text>{i}</Text>
      <TextInput
        style={styles.InputName}
        onChange={(e) => {
          setText(i, e.target.value);
        }}
      ></TextInput>
      <TouchableOpacity
        onPress={() => {
          handleMakeNew();
        }}
        style={styles.buttonAdd}
      >
        <Text>追加する</Text>
      </TouchableOpacity>
    </View>
  );
}

export default function TestListInputItem(props) {
  const [count, setCount] = useState(1);
  const [texts] = useState(props.texts);

  function handleMakeNew() {
    setCount((v) => v + 1);
    console.log(texts);//①コンソールチェック
  }
  return (
    <View>
      <Text>{JSON.stringify(texts)}</Text>
      {[...Array(count).keys()].map((i) => (
        <Item
          handleMakeNew={handleMakeNew}
          setText={(i, text) =>
            props.setTexts((prev) => ({ ...prev, [i]: text }))
          }
          key={i}
          i={i}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  list: {
    width: "100%",
    backgroundColor: "#ddd",
    padding: 10,
  },
  InputName: {
    borderWidth: 1,
    height: 40,
    backgroundColor: "#fff",
  },
  buttonAdd: {
    backgroundColor: "orange",
    width: 80,
    height: 40,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
});

追記終了

該当のソースコード

親コンポーネント

import React, { useState, useEffect } from "react";
import { View, StyleSheet } from "react-native";
import TestListInputItem from "../components/TestListInputItem";

export default function HomeScreen() {
  const [name, setName] = useState("");

  const setInputName = (text) => {
    setName(text);
  };

  return (
    <View style={styles.container}>
      <TestListInputItem name={name} setInputName={setInputName} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

子コンポーネント
＊仕様の都合で①のコードを変える事はできません。

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

export default function TestListInputItem(props) {
  const [count, setCount] = useState(1);

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

  function RenderList() {
    return (
      <View style={styles.list}>
        <TextInput
          style={styles.InputName}
          value={String(props.name)}
          onChangeText={(text) => {
            props.setInputName(text);
          }}
        ></TextInput>
        <TouchableOpacity
          onPress={() => {
            handleMakeNew();
          }}
          style={styles.buttonAdd}
        >
          <Text>追加する</Text>
        </TouchableOpacity>
      </View>
    );
  }

  return [...Array(count).keys()].map((i) => <RenderList key={i} />); //①仕様の都合でここのコードは変更できない
}

const styles = StyleSheet.create({
  list: {
    width: "100%",
    backgroundColor: "#ddd",
    padding: 10,
  },
  InputName: {
    borderWidth: 1,
    height: 40,
    backgroundColor: "#fff",
  },
  buttonAdd: {
    backgroundColor: "orange",
    width: 80,
    height: 40,
    margin: 3,
    justifyContent: "center",
    alignItems: "center",
    alignSelf: "center",
  },
});

試したこと

子コンポーネントの①の所でもpropsの要素を持たせても、同じように通常の入力動作になりません。

return [...Array(count).keys()].map((i) => (
    <RenderList key={i} name={props.name} setInputName={props.setInputName} />
  ));

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

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

Answer 1

子要素のコンポーネントは外に出したほうがいいですね。
それぞれの input で同じsetInputNameを呼び出してると親コンポーネントで管理できなくなるのでなにか対策が必要かもしれません。

↓例です。
https://codesandbox.io/s/tender-satoshi-37pe3?file=/src/App.js

Comments

[tomaa]

ご回答ありがとうございます。
ご丁寧に対応していただき、感謝します。
お陰様で、紹介していただいたコードを参考にし、通常どおりの入力、追加コンポーネントそれぞれの表示ができるようになりました。
しかし、入力したテキストを表示できますが、Stateの値として保持する事ができません。
`{JSON.stringify(texts)}`の箇所が`{}`のみ表示となり、textsのstateをコンソールで出力しても値が表示されない状況です。
この場合、子で入力した値と親コンポーネントで取得、利用する事は難しいでしょうか？

[anozon]

ReactNative でも同様にできると思います。
props のバケツリレーのどこかが間違っているのかもしれません。
また、バケツリレー自体を使わずにすむようにするなら react-hooks の useContext やredux などがあります

[tomaa]

何度もすみません。
コメントありがとうございます。
` onChange={(e) => {
setText(i, e.nativeEvent.text);
}}`
onChangeで受け取るオブジェクトの指定の仕方が違ったみたいで、上の書き方にすると値を受け取れました。