Mit State und Taste ein Element aus einer Liste entfernen

Question

Ich habe eine Liste wie so erstellt:

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

Wie kann ich eine Schaltfläche, die ich ein bestimmtes div-Element sowie reduziert die Staatsgrenze lassen Sie sich entfernen ?

Answer 1

In React müssen Sie fast alles an Daten binden. In Ihrem Beispiel sollten alle diese Elemente durch einige zugrunde liegende Daten repräsentiert werden. Hier ist ein sehr einfaches Beispiel das zeigt:

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

eine Schaltfläche erstellen

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

Add Funktion removeDiv

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

Wenn der Zustand ändert, Ihre Komponente wird es selbst mit den neuen Zustand wieder machen.