Reactjs supprimer un élément de Dexie.js

Question

Cet exemple utilise Reactjs et Dexie.js. J'ai une application CRUD sans le D, dont j'ai actuellement besoin. Alors que vous pouvez entrer et stocker de nouveaux éléments dans la base de données, je ne suis pas sûr de savoir comment sélectionner chaque élément qui a été ajouté et les supprimer. Je comprends que vous devez les sélectionner via leur ID.

Avec le tag i j'ai joint un .onClick={this.removal}. Cependant, je ne sais pas quoi ajouter à la fonction removal.

var datastored = new Dexie('MyPlace'); 
datastored.version(1).stores({entries:'++id, title, entry' }); 
datastored.open().catch(function(err){alert("Could not open database:"+err)}); 

var Dashboard = React.createClass({ 
getInitialState:function(){ 
    return {results: [] } 
    }, 

runcheck:function(){ 
    let arr = []; 
    datastored.entries 
    .each((uploaded)=>arr.push(uploaded)) 
    .then(()=>this.setState({results:arr}));  
}, 

componentDidMount:function(){ 
    this.runcheck(); 
}, 

removal:function(){ 
    datastored.entries.delete();  
},  

sendthru:function(){ 
    var newInput = { 
    title: this.inputTitle.value, 
    entry: this.inputEntry.value  
    }; 
    datastored.entries.add(newInput).then(()=>this.runcheck()); 
    this.inputTitle.value = '';  
    this.inputEntry.value = '';  
}, 

renderdem:function(){ 
    var list = this.state.results.map(result =>{ 
    return <tr key={result.id}> 
     <td>{result.id}</td> 
     <td>{result.title}</td> 
     <td>{result.entry} 
     <i className="fa fa-times-circle exout" aria-hidden="true" onClick={this.removal}></i> 
     </td> 
    </tr> 
});  
return (<div> 
    <p>Title</p>   
    <input type="text" id="inputname" className="form-control" ref={el => this.inputTitle = el} /> 
    <p>Entry</p>   
    <textarea id="inputentry" ref={el => this.inputEntry = el} className="form-control"></textarea> 
<button className="btn btn-info" onClick={this.sendthru}>Add</button>   
     <table className="table table-bordered"><tbody>{list}</tbody></table> 
</div>); 
},  

render:function(){ 
    return this.renderdem();}   
}); 

ReactDOM.render(<Dashboard />, document.getElementById('main')); 

J'ai inclus mon code dans jsFiddle

https://jsfiddle.net/5uevnock/

Answer 1

Comme vous avez remarqué que vous devez passer id afin de savoir ce qu'il faut supprimer. Toutefois, vous ne pouvez pas supprimer l'entrée immédiatement lors de la liaison de la fonction removal à onClick. L'astuce ici est de faire removal retourner une fonction qui sera appelée lorsque le clic se produit.

removal:function(id){ 
    var component = this; 
    return function(evt) { 
    datastored.entries.delete(id); 
    component.runcheck(); 
    } 
} 

Utilisez comme ceci:

<i className="fa fa-times-circle exout" aria-hidden="true" onClick={this.removal(result.id)}></i> 

Exemple de travail: https://jsfiddle.net/LukaszWiktor/u1vfoqgp/