家长: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>
)
}
})
感谢您寻找@wintvelt。不幸的是,那不是。 – TCannadySF