在發生反應的回調傳給孩子

Question

我有一個應用程序，如：

Main.js-

import React, { Component } from 'react'; 
import _ from 'underscore'; 

import { pick_attributes } from '../utils/general'; 
import ApplicationsButtons from '../components/ApplicationsButtons'; 
import BasicList from '../components/BasicList'; 


let API_BASE_URL = 'http://127.0.0.1:8889/api/' 


export default class Main extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      new_role: '', 
      new_task: '', 
      applications: [], 
      selected_app_id: 1, 
      roles: [], 
      tasks: [] 
     }; 
     this.updateSelectedApp = this.updateSelectedApp.bind(this); 
     this.updateApplicationData = this.updateApplicationData.bind(this); 
     this.loadAppData = this.loadAppData.bind(this); 
     this.getSelectedApplicationData = this.getSelectedApplicationData.bind(this); 
     this.setApplicationData = this.setApplicationData.bind(this); 

     this.handleItemFormChange = this.handleItemFormChange.bind(this); 
     this.submitAddItemForm = this.submitAddItemForm.bind(this); 

     this.addItemByAjax = this.addItemByAjax.bind(this); 
     this.deleteItemByAjax = this.deleteItemByAjax.bind(this); 
    } 

...

和Main.js休息 -

deleteItemByAjax(item_type, item_id) { 
      let self = this; 
      let url = API_BASE_URL + item_type + '/' + item_id; 
      $.ajax({ 
       url: url, 
       method: 'DELETE', 
       success: function(response) { 
        self.loadAppData(); 
       } 
      }) 
     } 

     render() { 

      return (
       <div> 
       <br/> 
       <ApplicationsButtons 
        apps={this.state.applications} 
        clickHandler={this.updateSelectedApp}/> 
       <BasicList 
        items={this.state.roles} 
        deleteCallback={this.deleteItemByAjax.bind(this, 'roles')} 
        item_type="roles" 
        title="Roles"/> 
       <form onSubmit={this.submitAddItemForm.bind(this, 'roles', 'new_role')}> 
        <label> 
        Add new role: 
        <input type="text" value={this.state.new_role} onChange={this.handleItemFormChange.bind(this, 'new_role')} /> 
        </label> 
        <input type="submit" value="Add role" /> 
       </form> 

       <BasicList 
        items={this.state.tasks} 
        deleteCallback={this.deleteItemByAjax.bind(this, 'tasks')} 
        title="Tasks"/> 

       <form onSubmit={this.submitAddItemForm.bind(this, 'tasks', 'new_task')}> 
        <label> 
        Add new task: 
        <input type="text" value={this.state.new_task} onChange={this.handleItemFormChange.bind(this, 'new_task')} /> 
        </label> 
        <input type="submit" value="Add task" /> 
       </form> 
       </div> 
      ); 
     } 
    } 

BasicList.js-

import React, { Component } from 'react'; 
import Select from 'react-select'; 
// import 'react-select/dist/react-select.css'; 

var options = [ 
    { value: 'one', label: 'One' }, 
    { value: 'two', label: 'Two' } 
]; 

export default class BasicList extends Component { 

    constructor(props) { 
     super(props); 
     this.state = {}; 
     this.logChange = this.logChange.bind(this); 
    } 

    logChange(val) { 
     console.log("Selected: " + val.value); 
    } 

    render() { 
     var li_elements = null; 
     let items = this.props.items; 
     if (items.length > 0) { 
      li_elements = items.map(function(role) { 
       console.log(role); 
       return (
        <li key={role.id}> 
         {role.name} - 
         <button onClick={() => this.props.deleteCallback.bind(this, role.id)}> 
         Delete 
         </button> 
        </li> 
      ); 
      }); 
     } 

     return (
      <div> 
      <h4>{this.props.title}:</h4> 
       <ul> 
        {li_elements} 
       </ul> 

       {/*} 
       <Select 
        styles={ {maxWidth: 100} } 
        name="form-field-name" 
        value="" 
        options={options} 
        onChange={this.logChange} 
       /> */} 
      </div> 
     ); 
    } 
} 

我的目標是儘可能乾淨地使用此deleteItemByAjax，在這種情況下，綁定第一個參數item_type在Main控制器，在傳遞給孩子之前。但是，我得到一個錯誤

bundle.js:23712 Uncaught TypeError: Cannot read property 'props' of undefined 
    at onClick 

當我點擊Delete按鈕爲這些角色/任務。

於是，我第一次嘗試傳遞

deleteCallback={this.deleteItemByAjax.bind(this, 'roles')}

然後使用它像

<button onClick={() => this.props.deleteCallback.bind(this, role.id)}>

我如何綁定的第一個參數，item_type在Main，然後綁定id爲在BasicList組件這些項目嗎？謝謝

 <BasicList 
      items={this.state.roles} 
      deleteCallback={this.deleteItemByAjax} 
      item_type="roles" 
      title="Roles"/> 

然後

<button onClick={() => {this.props.deleteCallback(this.props.item_type, role.id)} }> 
     Delete 
</button> 

也失敗同樣的錯誤

Answer 1

你應該結合本功能在所有你可以把它叫做this.props.deleteCallback（this.props.item_type， role.id）並刪除所有綁定。

Answer 2

先生解決。 Heinser：

render() { 
    let li_elements = null; 
    let items = this.props.items; 

    if (items.length > 0) { 
     li_elements = items.map((role) => { 
      console.log(role); 
      return (
       <li key={role.id}> 
        {role.name} - 
        <button onClick={() => {this.props.deleteCallback(this.props.item_type, role.id)} }> 
        Delete 
        </button> 
       </li> 
     ); 
     }); 
    }