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

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

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

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

Q&A

解決済

1回答

3362閲覧

todoアプリ編集機能追加

Kosuke0906

総合スコア13

React.js

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

0グッド

0クリップ

投稿2019/12/27 14:03

Reactでtodoアプリを作成しています。
追加機能と削除機能は実装できたのですが、編集機能に手こずっています。

toggleを付けてクリックした時にItemか、Inputタグが出てそこで編集する様にしています。
このInputに入力したテキストが表示される様にしたいのですが、EditFormからAppに渡されたvalueをどうやって処理すれば良いのかでつまづいています!

#####イベント実行時のエラー

error

1TypeError: Cannot read property 'value' of undefined

###コード
上から親子関係になっています

App

1import React, { useState } from "react"; 2import Form from "./Form"; 3import List from "./List"; 4 5const App = () => { 6 const [todos, setTodo] = useState(["スキップ", "ジャンプ", "しゃがむ"]); 7 const addTodos = text => { 8 if (!text) { 9 return; 10 } 11 const newTodos=[...todos, text]; 12 setTodo(newTodos); 13 }; 14 const removeTodos= todo =>{ 15 setTodo(todos.filter(e=>e !== todo)) 16 } 17 const changeText=(value)=>{ 18 setTodo(e=>e.target.value) 19 } 20 return ( 21 <div> 22 <Form addTodos={addTodos}/> 23 <List todos={todos} removeTodos={removeTodos} changeText={changeText}/> 24 </div> 25 ); 26}; 27 28export default App; 29

List

1import React from "react"; 2import Item from "./Item"; 3const List = props => { 4 const todos = props.todos.map((todo, i) => { 5 return ( 6 <Item 7 key={i} 8 desc={todo} 9 remove={props.removeTodos} 10 changeText={props.changeText} 11 /> 12 ); 13 }); 14 return <ol>{todos}</ol>; 15}; 16export default List; 17

Item

1import React, { useState } from "react"; 2import EditForm from "./EditForm"; 3const Item = props => { 4 const [isDone, setIsDone] = useState(false); 5 const toggleIsDone = () => setIsDone(!isDone); 6 const buttonText = isDone ? "戻す" : "完了"; 7 const handleClick = () => props.remove(props.desc); 8 const [editIt, editIsDone] = useState(false); 9 const toggleEditForm = () => editIsDone(!editIt); 10 const changeText = props.changeText; 11 return ( 12 <li> 13 {editIt ? <EditForm changeText={changeText} /> : <p>props.desc</p>} 14 <button onClick={toggleIsDone}>{buttonText}</button> 15 <button onClick={handleClick}>削除</button> 16 <button onClick={toggleEditForm}>編集</button> 17 </li> 18 ); 19}; 20 21export default Item; 22

EditForm

1import React, { useState } from "react"; 2 3const EditForm = props => { 4 const [value, setValue] = useState(""); 5 const handleChange = () => props.changeText(value); 6 return ( 7 <form action=""> 8 <input 9 type="text" 10 value={value} 11 placeholder="React編集" 12 onChange={e => setValue(e.target.value)} 13 /> 14 <button type="submit" onClick={handleChange}> 15 実行 16 </button> 17 </form> 18 ); 19}; 20export default EditForm; 21

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

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

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

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

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

guest

回答1

0

ベストアンサー

こんにちは。
以下のように修正してみると、いかがでしょうか?

(1) App

App の changeText に引数 pos を追加します。これは配列todos のインデクスとなる整数値が入ってくる想定で、 todospos の位置の要素を value で置き換えた配列で setTodoするようにします。以下は修正後の changeText です。

修正後:

javascript

1const changeText = (pos, value) => { 2 const newTodos = todos.map((e, i) => i === pos ? value : e); 3 setTodo(newTodos); 4}

(2) List

List が return する、todosの各要素に相当するItemを作るところで、<Item> の props changeText の値となる関数において、props.changeText の実行の際、(1)で追加した、配列のインデクス i も渡すようにします。この i は map に渡す関数の第二引数として入ってくるもので、props key に与えているものと同じものです。

修正前:

javascript

1changeText={props.changeText}

修正後:

javascript

1key={i} 2・・・ 3changeText={value => props.changeText(i, value)}

(3) Item

まず、以下の部分

修正前:

javascript

1const [editIt, editIsDone] = useState(false);

ですが、 editIsDone という名前だと、 editIsDone(true) を実行したときに、編集が完了したような意味合いになりますが、実際はeditIt が true になって編集状態になります。したがってeditIsDone という名前は混乱の元かと思いますので、以下のように、 editIt の値を設定するという意味で、setEditIt に変更します。

修正後:

javascript

1const [editIt, setEditIt] = useState(false);

上記にあわせて下記も editIsDone から setEditIt に修正します。

修正後:

javascript

1const toggleEditForm = () => setEditIt(!editIt);

それと、 <EditForm> に渡すpropsとして value を追加して、input の初期値を指定するようにします。

jsx

1{editIt ? <EditForm changeText={changeText} value={props.desc}/> : <p>{props.desc}</p>}

(4) EditForm

useState で得られる value の初期値が、上記(3) による追加で、propsから渡される value になるように、以下のように修正します。

修正後:

javascript

1const [value, setValue] = useState(props.value || "");

また、return で返すJSXで、 <form>を使う必要はないので、以下のように <div>に変更し、<button>のtype を submit ではなく button にします。

修正後:

jsx

1 return ( 2 <div> 3 <input 4 type="text" 5 value={value} 6 placeholder="React編集" 7 onChange={e => setValue(e.target.value)} 8 /> 9 <button type="button" onClick={handleChange}> 10 実行 11 </button> 12 </div> 13 );

上記の修正で、とりあえず編集ができるようになると思います。

以上、参考になれば幸いです。

投稿2019/12/27 16:47

jun68ykt

総合スコア9058

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

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

Kosuke0906

2019/12/28 06:46

すごく分かり易くかったです!! ありがとうございます! 実行した時、渡されたvalueのインデックスが等しいか等しくないかで分岐させるのですね! 後は編集して実行押した時inputタグが消える様にしていきます!! 自力で頑張ります????
jun68ykt

2019/12/28 11:04

どういたしまして。 疑問が解決したようで、よかったです????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問