2015-11-05 134 views
0

家长:User_Show阵营从父到子传递方法不从孩子射击

儿童:User_Item_Card

任何想法,为什么removeItemFromDOM()不在内发射不像() ajax打电话User_Item_Card

这个想法是,unlike()从Rails数据库中删除模型。发生这种情况时,我使用removeItemFromDOM()对父引发forceUpdate()所以这将刷新子组件(减去这是已取消的一个)。

User_Show:

var UserShow = React.createClass({ 

getInitialState: function(){ 
    return{ 
     didFetchData: false, 
     userName: [], 
     userItems: [], 
     headerImage: "../users.png" 
    } 
}, 

componentDidMount: function(){ 
    this.fetchData() 
}, 

fetchData: function(){ 
    var params = this.props.params.id 
    $.ajax({ 
     type: "GET", 
     url: "https://stackoverflow.com/users/" + params, 
     data: "data", 
     dataType: 'json', 
     success: function(data){ 
      this.setState({didFetchData: 'true', userName: data.user_name, userItems: data.items, headerImage: data.photo_url}) 
     }.bind(this), 
     error: function(data){ 
      alert('error! couldnt load user into user show') 
     } 
    }) 
}, 

removeItemFromDOM: function(){  // HERE'S WHAT SHOULD FIRE 
    alert('removing from parent') 
    this.forceUpdate() 
}, 

render: function(){ 
    var userItem = this.state.userItems.map(function(item){ 
     return <UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} removeItemFromDOM={this.removeItemFromDOM}/> 
    }) 
    return(
     <div> 
      <Header img_src={this.state.headerImage} /> 

      <section className="body-wrapper"> 
       {userItem}    
      </section> 
     </div> 
    ) 
} 
}) 

User_Item_Card:

var UserItemCard = React.createClass({ 
getInitialState: function(){ 
    return{ 
     itemID: this.props.id, 
     userID: null, 
     userHasLikedItem: null 
    } 
}, 

componentDidMount: function(){ 
    newState = this.currentUserID() 
    this.setState({userID: newState}) 
}, 

currentUserID: function(){ 
    if(App.checkLoggedIn()){ 
     var email = this.currentUserEmail() 
     this.fetchUserID(email) 
    }else{ 
    } 
}, 

currentUserEmail: function(){ 
    return localStorage.getItem('email') 
}, 

fetchUserID: function(email){ 
    $.ajax({ 
     type: "GET", 
     url: "https://stackoverflow.com/users/email", 
     data: {email: email}, 
     dataType: 'json', 
     success: function(data){ 
      this.setState({didFetchData: 'true', userID: data.user_id}) 
     }.bind(this), 
     error: function(data){ 
      alert('error! couldnt fetch user id') 
     } 
    }) 
}, 

addLike: function(){ 
    var data = { 
     itemID: this.state.itemID, 
     userID: this.state.userID 
    } 
    // Submit form via jQuery/AJAX 
    $.ajax({ 
     type: 'POST', 
     url: '/items/' + this.state.userID + '/like', 
     data: data, 
     success: function(data){ 
      alert('like successful!') 
     }.bind(this), 
     error: function(data){ 
      alert('failed to like item!') 
     } 
    }); 
}, 

unLike: function(){ 
    var data = { 
     itemID: this.state.itemID, 
     userID: this.state.userID 
    } 
    // Submit form via jQuery/AJAX 
    $.ajax({ 
     type: 'POST', 
     url: '/items/' + this.state.userID + '/unlike', 
     data: data, 
     success: function(data){ 
      alert('unlike successful!') 
      this.props.removeItemFromDOM() // HERE'S WHERE I'M ATTEMPTING TO FIRE THE METHOD PASSED DOWN FROM THE PARENT 
     }.bind(this), 
     error: function(data){ 
      alert('failed to unlike item!') 
     } 
    }) 
}, 

handleLike: function(e){ 
    e.preventDefault() 
    this.addLike() 
}, 

handleUnLike: function(e){ 
    e.preventDefault() 
    this.unLike() 
}, 


render: function(){ 
    return(
     <div className="card-wrapper"> 
      <Link to="itemShow" params={{id: this.props.id}} className="card-text" > 
       <div className="card-img-wrapper"> 
        <img src={this.props.photo_url} className="card-img" /> 
       </div> 
       {this.props.description} 
      </Link> 

      <br/> 

      <a href="" onClick={this.handleLike}> Like </a> 
      <a href="" onClick={this.handleUnLike}> Unlike </a> 

     </div> 
    ) 
} 
}) 

回答

0

它可能是一个简单的拼写错误?添加额外的';'帮帮我?

success: function(data){ 
      alert('unlike successful!'); // ADD ; HERE 
      this.props.removeItemFromDOM() // HERE'S WHERE I'M ATTEMPTING TO FIRE THE METHOD PASSED DOWN FROM THE PARENT 
     }.bind(this), 
+0

感谢您寻找@wintvelt。不幸的是,那不是。 – TCannadySF

0

发现了一种解决方案:

上下文是不正确的,当我传递给该方法在作为道具。下面是工作了渲染功能usershow将(父组件):

render: function(){ 
    var that = this // solution 
    var userItem = this.state.userItems.map(function(item){ 
     return <UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} removeItemFromDOM={that.removeItemFromDOM}/> //notice the use of 'that' 
    }) 
    return(
     <div> 
      <Header img_src={this.state.headerImage} /> 

      <section className="body-wrapper"> 
       {userItem}    
      </section> 
     </div> 
    ) 
} 

我还没有得到真正从DOM删除元素,但至少警报被解雇从该方法。