パラメータを使用したコールバック関数ReactJS

Question

ReactJSを使用しており、ReactJSの使用方法を理解する上での問題があります。

私は、TodoFormComponentと名付けられた親コンポーネントを持っています。それはtodoアイテムのリストを初期化します。 TodoItemsComonentにコールバック関数を作成しましたが、updateItemメソッドがトリガーされず、selectedアイテムが表示されます。

質問：子から親にデータを渡すにはどうすればよいですか？選択したtodoアイテムを親に渡して、マスターtodoリストを更新できるようにします。

---

親コンポーネント（TodoFormComponent）

---

TodoFormComponentはupdateItemメソッドをトリガしなければならないselectedTaskを有しています。

import * as React from "react"; 
import TodoItemsComponent from "../todo-items/todo-items.component"; 
import AddTodoItemComponent from "../add-todo-item/add-todo-item.component"; 

export default class TodoFormComponent extends React.Component { 
    constructor(){ 
     super(); 
     this.state = { 
      todoItems: [ 
       { id: '1', todo: 'First Todo Item' }, 
       { id: '2', todo: 'Second Todo Item' }, 
       { id: '3', todo: 'Third Todo Item' } 
      ], 
      selected: {} 
     }; 

     this.updateItem = this.updateItem.bind(this); 
    } 

    updateItem() { 
     console.log('Selected Value:: ', this.state.selected); 
    } 

    render() { 
     return (
      <div className="row"> 
       <div className="container"> 
        <div className="well col-xs-6 col-xs-offset-3"> 
         <h1>To do: </h1> 
         <div name="todo-items"> 
          <TodoItemsComponent items={this.state.todoItems} selectedTask={() => {this.updateItem}}/> 
         </div> 
         <div name="add-todo-item"> 
          <AddTodoItemComponent/> 
         </div> 
        </div> 
       </div> 
      </div> 
     ) 
    } 
} 

---

子成分（TodoItemsComponent）

---

TodoItemsComponentが選択された値を更新するonClickを有しています。これは、selectedTask関数で更新されます。 import * as "react"からの反応;

export default class TodoItemsComponent extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    selectedTask (item) { 
     this.setState({selected: item}) 
    } 

    render() { 
     return (
      <ul className="list-group"> 
       { 
        this.props.items.map((item) => { 
         return (
          <li className="list-group-item"> 
           {item.todo} 
           <div className="pull-right"> 
            <button 
             type="button" 
             className="btn btn-xs btn-success"> 
             &#x2713; 
            </button> <button 
             type="button" 
             className="btn btn-xs btn-danger" 
             onClick={() => {this.selectedTask(item)}} 
             >&#xff38; 
            </button> 
           </div> 
          </li> 
         ) 
        }) 
       } 
      </ul> 
     ) 
    } 
} 

Answer 1

あなたは、子供からあなたはここでthis.props.passedFunction(yourDataToPassToParent)

を使用してその関数を呼び出す子供に小道具として関数を渡す子から親にデータを渡したいときはいつでも

また

<button 
    type="button" 
    className="btn btn-xs btn-danger" 
    onClick={() => {this.props.selectedTask(item)}} 
> 
    &#xff38; 
</button> 

トン：あなたのような親に渡されるデータでthis.prop.selectedTask()を呼び出す必要がありますので、あなたの親コンポーネントからあなたは、小道具としてselectedTask機能を渡しています彼の方法であなたの親にselectedTaskが間違っています。

<TodoItemsComponent items={this.state.todoItems} selectedTask={this.updateItem}/> 

Answer 2

TodoItemsComponentでは、updateItem（）がpropとして渡されます。したがって、onClickメソッドでthis.props.updateItem()に電話する必要があります。

だからあなたのボタンは次のようになります。

    <button 
       type="button" 
       className="btn btn-xs btn-danger" 
       onClick={() => 
        {this.props.selectedTask(item)}}>&#xff38; 
       </button> 

とアイテムとしての性質を受信するための方法を、あなたの親コンポーネントをUpdateItem更新します。

updateItem (e) { 
    console.log('Selected Value:: ', e); 
} 

そして、あなたがこれを行う場合は

   <TodoItemsComponent items= 
       {this.state.todoItems} selectedTask={this.updateItem}/> 

にあなたが必要とする子供の方法を渡す：{()=>this.updateItem()}を、それはメソッドを初期化します。このように。だから関数参照を渡すだけでいいです。

Answer 3

子コンポーネントにpropItとしてupdateItemを送信する必要があります。

class Parent extends React.Component { 
    render() { 
     return (<Child id={1} onClick={(id) => console.log(id)}/>); 
    } 
} 

class Child extends React.Component { 
    render() { 
     return (<div onClick={() => this.props.onClick(this.props.id)}></div>); 
    } 
} 

コンソール：

const Parent =() => 
<div> 
    <TodoItemsComponent items={this.state.todoItems} selectedTask={updateItem}/> 
</div> 

また

updateItem (item) { 
    this.setState({ selected: item }) 
    console.log('Selected Value:: ', item); 
} 

Answer 4

いくつかの擬似コードを更新します。ログが出力さ「1」

より：link

Answer 5

固定コード：

class TodoItemsComponent extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    render() { 
 
    return (
 
     <ul className="list-group"> 
 
     {this.props.items.map(item => { 
 
      return (
 
      <li className="list-group-item"> 
 
       {item.todo} 
 
       <div className="pull-right"> 
 
       <button type="button" className="btn btn-xs btn-success"> 
 
        &#x2713; 
 
       </button>{" "} 
 
       <button 
 
        type="button" 
 
        className="btn btn-xs btn-danger" 
 
        onClick={() => { 
 
        this.props.selectedTask(item); 
 
        }} 
 
       > 
 
        &#xff38; 
 
       </button> 
 
       </div> 
 
      </li> 
 
     ); 
 
     })} 
 
     </ul> 
 
    ); 
 
    } 
 
} 
 

 
class TodoFormComponent extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     todoItems: [ 
 
     { id: "1", todo: "First Todo Item" }, 
 
     { id: "2", todo: "Second Todo Item" }, 
 
     { id: "3", todo: "Third Todo Item" } 
 
     ], 
 
     selected: {} 
 
    }; 
 

 
    this.updateItem = this.updateItem.bind(this); 
 
    } 
 

 
    updateItem(item) { 
 
    this.setState({ selected: item }); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div className="row"> 
 
     <div className="container"> 
 
      <div className="well col-xs-6 col-xs-offset-3"> 
 
      <h1>To do: </h1> 
 
      <h3> 
 
       Selected task: {JSON.stringify(this.state.selected)} 
 
      </h3> 
 
      <div name="todo-items"> 
 
       <TodoItemsComponent 
 
       items={this.state.todoItems} 
 
       selectedTask={this.updateItem} 
 
       /> 
 
      </div> 
 
      <div name="add-todo-item" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const App =() => <TodoFormComponent />; 
 

 
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

遊び場：https://codesandbox.io/s/LgrGKK9og