道具作为父母的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回调

回答

相关问题