道具作爲父母的react.js回調

我知道如何使用道具設置回調父組件。我在官方反應教程中這樣做。但是，假設我想把道具傳遞給父母的父母。假設我有以下部分組成：道具作爲父母的react.js回調

AllergyBox 
 
    AllergiesList 
 
    Allergy

我想要實現過敏刪除功能。 AllergyBox擁有過敏症列表的狀態並將其作爲道具傳遞下來。每當過敏刪除按鈕被點擊，我想刪除過敏和刷新用戶界面。所以我嘗試：

var Allergy = React.createClass({ 
 
    deleteAllergy: function(e){ 
 
     e.preventDefault(); 
 
     var allergy_id = this.props.id; 
 
     this.props.onAllergyDelete({ 
 
      id: allergy_id 
 
     }); 
 
    }, 
 
    render: function(){ 
 
     return(
 
      <li>{this.props.name} <a href="#" onClick={this.deleteAllergy}> </a></li> 
 
     ) 
 
    } 
 
});

及過敏名單看起來就像是：

var AllergiesList = React.createClass({ 
 
    getDefaultProps: function(){ 
 
     return {allergies: []} 
 
    }, 
 
    sendAllergyDelete: function(id){ 
 
     this.props.onSendAllergyDelete({ 
 
      id: id 
 
     }) 
 
    }, 
 
    render:function(){ 
 
     var allergies = this.props.allergies.map(function(allergy){ 
 
      return(
 
       <Allergy name={allergy.name} key={allergy.id} id={allergy.id} onAllergyDelete={this.sendAllergyDelete} /> 
 
      ) 
 
     }); 
 
     return(
 
      <ul> 
 
       {allergies} 
 
      </ul> 
 
     ) 
 
    } 
 
});

而且我應該處理我刪除AllergyBox組件：

var AllergyBox = React.createClass({ 
 

 
    getInitialState: function(){ 
 
     return { 
 
      allergiesList: [], 
 
      form: [] 
 
     } 
 
    }, 
 
    
 
    handleAllergyDelete: function(id){ 
 
     alert(id); 
 
    }, 
 
    render: function(){ 
 
     return(
 
      <div className="allergies"> 
 
       <AllergiesList allergies={this.state.allergiesList} onSendAllergyDelete={this.handleAllergyDelete} /> 
 
      </div> 
 
     ) 
 
    } 
 
});

但我有過敏成分的錯誤：

this.props.onAllergyDelete is not a function

我是新來的反應，所以我不知道什麼是最好的解決辦法通過組件層次結構傳遞某些東西。

來源

2016-02-13 yerassyl

您需要AllergiesList設置this爲.map，因爲在.map回調默認this是指全球範圍內（在瀏覽器，它是window），或者如果您使用strict mode這將是undefined。當你通過this.sendAllergyDelete作爲一個說法，你不通過引用功能 - 你通過window.sendAllergyDelete即等於undefined，因爲在window沒有sendAllergyDelete功能

var allergies = this.props.allergies.map(function(allergy) { 
    return (
    <Allergy 
     name={allergy.name} 
     key={allergy.id} 
     id={allergy.id} 
     onAllergyDelete={this.sendAllergyDelete} /> 
) 
}, this); 
    ^^^^

來源

2016-02-13 12:31:56

好吧，我找到了解決辦法。

var that = this; 
 
var allergies = this.props.allergies.map(function(allergy){ 
 
    return(
 
     <Allergy onAllergyDelete={that.handleAllergyDelete} name={allergy.name} key={allergy.id} id={allergy.id} /> 
 
     ) 
 
});

我聲明變量等於該（組分）。所以，在.map中我可以使用that.handleAllergyDelete。

來源

2016-02-13 13:18:26 yerassyl

道具作爲父母的react.js回調

回答

相關問題