現在、以下のサイトを参考にReactのAjax処理について勉強しています。
React-Ajax
しかしながら分からない点があったので質問させていただきます。この質問はReactに依存した問題ではないかもしれません。(私がJavaScriptも初心者なため定かではありません)
下記コードの、jsx部分、即ちrender()関数部分での updateTodo()、deleteTodo()の2つの関数呼び出しとaddTodo()の関数呼び出しのフォーマットが違うのは何故なのでしょうか?
前者は
onClick={() => this.updateTodo(todo)}
後者は
onClick={this.addTodo}
前者をアロー関数にする意味がよくわかりません。 初心者の私からすると前者も
onClick={this.updateTodo(todo)}
で良いような気がしていまします。
何故これだとうまくいかないのでしょうか?
JavaScript
1import React, { Component } from 'react'; 2 3class App extends Component { 4 constructor(props){ 5 super(props); 6 this.state = { 7 todo: [] 8 }; 9 10 this.addTodo = this.addTodo.bind(this); 11 } 12 13 // 初期値の設定 14 componentWillMount(){ 15 this.fetchResponse(); 16 } 17 18 // リストの更新 19 fetchResponse(){ 20 fetch('http://localhost:3001/todos') 21 .then( res => res.json() ) 22 .then( res => { 23 this.setState({ 24 todo : res 25 }); 26 }) 27 } 28 29 // 新規追加 30 addTodo() { 31 fetch('http://localhost:3001/todos', { 32 method: 'POST', 33 body: JSON.stringify({ 34 title: this.refs.newText.value 35 }), 36 headers: new Headers({ 'Content-type' : 'application/json' }) 37 }).then( () => { 38 // リストの更新 39 this.fetchResponse(); 40 // 値の初期化 41 this.refs.newText.value = ""; 42 }) 43 } 44 45 // 編集機能 46 updateTodo(todo) { 47 fetch(`http://localhost:3001/todos/${todo.id}`, { 48 method: 'PUT', 49 body: JSON.stringify({ 50 id: todo.id, 51 title: todo.title 52 }), 53 headers: new Headers({ 'Content-type' : 'application/json' }) 54 }) 55 } 56 57 // 削除機能 58 deleteTodo(todo) { 59 fetch(`http://localhost:3001/todos/${todo.id}`, { 60 method: 'DELETE' 61 }).then( () => { 62 const todos = this.state.todo.filter(item => item.id !== todo.id) 63 // 保存 64 this.setState({ 65 todo : todos 66 }); 67 }) 68 } 69 70 render() { 71 return ( 72 <div> 73 <h1>TODOアプリ</h1> 74 <ul> 75 {this.state.todo.map( todo => ( 76 <li key={todo.id}> 77 <input type="text" 78 defaultValue={todo.title} 79 onChange={e => todo.title = e.target.value} 80 /> 81 <input type="button" value="編集" onClick={() => this.updateTodo(todo)}/> 82 <input type="button" value="削除" onClick={() => this.deleteTodo(todo)}/> 83 </li> 84 ))} 85 </ul> 86 <input type="text" ref="newText"/> 87 <input type="button" value="追加" onClick={this.addTodo}/> 88 </div> 89 ); 90 } 91} 92 93export default App;
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 18:09