使用状态，按钮从列表

Question

我有一个列表，像这样创建删除元素：

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

如何创建一个按钮，它可以让我删除特定的div元素以及减少国家限制？

Answer 1

在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>

Answer 2

创建一个按钮

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

添加功能removeDiv

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

当改变状态，您的组件将重新呈现它的自我与新的状态。