データのフィルタリング時に入力フィールドの反応がフォーカスを失う

配列のinputリストがあり、配列のリストの入力を開始すると、に対応するフィルターが適用されますvalue。機能しinputますが、文字を入力した後、フォーカスが緩んでしまいます。

私のコード：

const MyPage = (props) => {

  const [searchTerm, setSearchTerm] = useState("");

  const results = !searchTerm
      ? people
      : people.filter(person =>
          person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
        );

  const handleChange = event => {
      setSearchTerm(event.target.value);
    };

  const Desktop = ({ children }) => {
    const isDesktop = useMediaQuery({ minWidth: 992 })

    return (
      isDesktop?
      <View>
          <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
      </View>
      :null
    )
  }

  return(
    <View style={{width:'100%',justifyContent:'center'}}>
      <Desktop/>
    </View>
  )
}

<Desktop/>直接入れれば帰る代わりに

<input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>

それが動作します。この問題を解決する方法はありますか？

アドバイスやコメントをいただければ幸いです！

前もって感謝します！

Desktopコンポーネントをコンポーネントの外に移動すると、MyAppこの問題が修正されます。これの主な理由は、Desktopコンポーネントが各レンダーで（入力するたびに）再作成されるため、入力要素のフォーカスが失われるためです。また、useCallbackとuseMemoフックを使用してこれを多少軽減することもできます。どちらも公式のReactドキュメントで詳細に説明されていますが、この例では必要ありません。

コンポーネント内の他のコンポーネントの宣言については、この回答も参照してください。

autoFocus={true}入力のプロパティを使用

また、ハックトリックとして、autoFocus入力のプロパティを使用できます。

        <input
          autoFocus={true}
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
    />

問題は、コンポーネント内にコンポーネントがあることです。そのため、状態が変化すると、Desktopコンポーネントが再初期化され、これによりinputがフォーカスを失います。両方のコンポーネントを1つにマージしました。実際にDesktop独自のコンポーネントである必要がある場合DesktopはMyPage、外部で宣言しsearchTerm, results, handleChange、プロップとしてに渡しDesktopます。

const MyPage = props => {
  const [searchTerm, setSearchTerm] = useState("");
  const isDesktop = useMediaQuery({ minWidth: 992 });

  const results = !searchTerm
    ? people
    : people.filter(person =>
        person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
      );

  const handleChange = event => {
    setSearchTerm(event.target.value);
  };

  return (
    <View style={{ width: "100%", justifyContent: "center" }}>
      {isDesktop && (
        <View>
          <input
            type="text"
            placeholder="Search"
            value={searchTerm}
            onChange={handleChange}
          />
          <View style={{ width: 100, height: 100, backgroundColor: "red" }}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
        </View>
      )}
    </View>
  );
};