使用狀態，按鈕從列表

我有一個列表，像這樣創建刪除元素：使用狀態，按鈕從列表

return (this.state.limit).fill().map((_,index) => { 
    return ( 
    <div key={`${index}`}> Item </div> 
) 
)

如何創建一個按鈕，它可以讓我刪除特定的div元素以及減少國家限制？

來源

2016-11-10 kermitvomit

更新'limit'狀態（通過去除的setState的項目），並讓反應再次渲染它。 –

更新狀態只會刪除最後一個div。我正在尋找一種方法來移除數組中間的div元素。 – kermitvomit

然後刪除該狀態中的特定項目。 –

在React中，您將不得不幾乎將所有內容綁定到數據。在你的例子中，所有這些項目都應該由一些基礎數據來表示。下面是顯示這是一個非常簡單的例子：

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'], 
 
    }; 
 
    } 
 
    removeItem(item) { 
 
    let data = this.state.data.filter((_, i) => i != item); 
 
    this.setState({ data }); 
 
    } 
 
    render() { 
 
    return (
 
    <div> 
 
     {this.state.data.map((item, i) => <div key={i} onClick={() => this.removeItem(i)}>{item}</div>)} 
 
    </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>

來源

2016-11-10 18:37:32

謝謝！這是我需要的指導:) – kermitvomit

@FabianSchultz哎呀，好點。不理我！ –

@FabianSchultz我刪除了該評論，所以有人不會看到這一點，並感到困惑。 –

創建一個按鈕

<button onClick={removeDiv}> 
    Remove div 
</button>

添加功能removeDiv

function removeDiv(){ 
    this.state.limit.shift() 
    this.setState({limit: this.state.limit}) 
}

當改變狀態，您的組件將重新呈現它的自我與新的狀態。

來源

2016-11-10 17:17:19 Tareq

使用狀態，按鈕從列表

回答

相關問題