質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

1回答

2650閲覧

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

tomaa

総合スコア84

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/08/11 10:35

前提・実現したいこと

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

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

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

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

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

イメージ説明

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

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

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

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

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

該当のソースコード

JS

1import React, { useState } from "react"; 2import { View, Text, Button, TextInput, StyleSheet } from "react-native"; 3 4function Item({ number, handleInput, handleAdd, handleDelete, index }) { 5 return ( 6 <View style={styles.list}> 7 <Text>{index}</Text> 8 <TextInput 9 style={{ borderWidth: 1 }} 10 value={number[index]} 11 onChange={(e) => { 12 handleInput(index, e.nativeEvent.text); 13 }} 14 ></TextInput> 15 <Button 16 title="追加" 17 onPress={() => { 18 handleAdd(); 19 }} 20 /> 21 <Button 22 title="削除" 23 onPress={() => { 24 handleDelete(index); 25 }} 26 /> 27 </View> 28 ); 29} 30 31export default function TestStateArray() { 32 const [count, setCount] = useState(1); 33 const [number, setNumber] = useState([]); 34 35 function handleAdd() { 36 setCount((v) => v + 1); 37 } 38 39 function handleDelete(index) { 40 setCount((v) => v - 1); 41 setNumber((v) => { 42 const ret = v.slice(); 43 ret.splice(index, 1); 44 return ret; 45 }); 46 } 47 48 function handleInput(index, text) { 49 setNumber((v) => { 50 const ret = v.slice(); 51 ret[index] = text; 52 return ret; 53 }); 54 } 55 56 return ( 57 <View> 58 {Array.from({ length: count }, (_, i) => ( 59 <Item 60 number={number} 61 handleInput={handleInput} 62 handleAdd={handleAdd} 63 handleDelete={handleDelete} 64 key={i + "-" + number} 65 index={i} 66 /> 67 ))} 68 </View> 69 ); 70} 71 72const styles = StyleSheet.create({ 73 list: { 74 margin: 10, 75 padding: 10, 76 backgroundColor: "#ddd", 77 }, 78}); 79

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

node : 12.18.3
react native : 4.10.1
expo : 3.22.3

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

以下ように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()の前に配列のコピーを動作をさせると、今回の問題は解決できませんでした。

投稿2020/08/12 01:59

編集2020/08/12 02:24
tomaa

総合スコア84

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問