我發現這個JSFiddle:http://jsfiddle.net/jwm6k66c/315/但有什麼不同是我試圖在一個更復雜的架構與類依賴關係實現項刪除。如何在有多個類時刪除ReactJS中的項目?
也可能值得一提的是,物品創作完美運作,但物品刪除必須以不同的方式實施(因爲我不希望所有物品都會被刪除,而按鈕應該只刪除其各自的物品)。我在每個類中都有deleteItem: React.PropTypes.func.isRequired
作爲propType,但我不確定這是否正確。
所以首先我有我的Item.jsx類的渲染和onDelte方法,我在那裏呈現「物品」,包括他們的「刪除」(Eliminar)按鈕:
onDelete(item){
e.preventDefault();
deleteItem(item);
}
render(){
const {item} = this.props;
return(
<li>
<a onClick={this.onClick.bind(this)}>
{item.name}
</a><br/>
<a onClick={this.onClick.bind(this)}>
{item.price}
</a><br/>
<a onClick={this.onClick.bind(this)}>
{item.donation}
</a><br/>
<a onClick={this.onClick.bind(this)}>
{item.image}
</a><br/>
<form onSubmit = {this.onDelete.bind(this)}>
<input type = "submit" value = "Eliminar"/>
</form>
</li>
)
}
然後我們有App.jsx的方法:
deleteItem(item){
const newState = this.state.items;
if (newState.indexOf(item) > -1) {
newState.splice(newState.indexOf(item), 1);
this.setState({items: newState})
}
render(){
return(
<ItemSection
items = {this.state.items}
addItem = {this.addItem.bind(this)}
setItem = {this.setItem.bind(this)}
deleteItem = {this.deleteItem.bind(this)}
/>
)
然後ItemForm和ItemList是由ItemSection導入的類。 ItemSection呈現包括deleteItem在內的所有propty的div。
最後這裏的ITEMLIST的渲染方法:
render(){
return(
<ul>{
this.props.items.map(itm =>{
return <Item
item = {itm}
key = {itm.id}
setItem = {this.props.setItem}
deleteItem = {this.props.deleteItem}
/>
})
}</ul>
)
}
渲染的文件是我發現了一個未被捕獲的錯誤(也看不懂是什麼東西,因爲它會立即在我的開發者控制檯消失)時的會發生什麼然後應用程序重新啓動。
謝謝!它工作正常。然而,使用傳播運算符並沒有使事情發揮作用。 newState should = this.state.items,否則會出現錯誤,說'newState.indexOf不是函數'。 –