如何在有多個類時刪除ReactJS中的項目？

我發現這個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> 
    ) 
}

渲染的文件是我發現了一個未被捕獲的錯誤（也看不懂是什麼東西，因爲它會立即在我的開發者控制檯消失）時的會發生什麼然後應用程序重新啓動。

來源

2016-09-28 Esteban Vargas

當窗體的onSubmit方法被調用時，它首先嚐試以老式方式提交窗體。相反，定義自己的方法防止默認行爲的（在你的代碼中的第一個參數得到傳遞給deleteItem是事件，而不是項目），我建議只使用一個按鈕，如下：

<button onClick = {() => this.props.deleteItem(this.props.item}>Submit</button>

如果您不想，因爲它已經提到，你可以這樣

<form onSubmit = {event => this.onDelete(event, item)}>

和onDelete方法形式的onsubmit改變的東西

onDelete(e, item) { 
    e.preventDefault(); 

    this.props.deleteItem(item): 
}

此外，常量newState = this.st ate.items返回只是一個參考，你可以使用蔓延運營商獲得一個新的副本

const newState = { ...this.state.items }

來源

2016-09-28 22:48:24 TheVanillaCoke

謝謝！它工作正常。然而，使用傳播運算符並沒有使事情發揮作用。 newState should = this.state.items，否則會出現錯誤，說'newState.indexOf不是函數'。 –

我認爲這個問題可能是在你item.jsxdeleteItem(item);。你需要說this.props.deleteItem(item);。

此外，在同樣的方法，你在做e.preventDefault()和e甚至沒有通過。所以通過e您的方法來使用它。

在這一行const newState = this.state.items;，你得到的狀態是相同的引用，而不是返回一個新的變量，以及使用const用於常量，而你用相同的方法進行變異時。我會建議做let newState = this.state.items.slice();以獲得新的副本。

在這裏newState.splice(newState.indexOf(item), 1);，您可以將索引分配給變量，因爲您在該方法中使用了兩次。

來源

2016-09-28 22:51:09 Kafo

如何在有多個類時刪除ReactJS中的項目？

回答

相關問題