Reactjs Dexie.jsからアイテムを削除

Question

この例ではReactjsとDexie.js.を使用していますが、私は現在必要なDがないCRUDアプリを持っています。新しい項目をデータベースに入力して保存することはできますが、追加された各項目を選択して削除する方法はわかりません。 IDで選択する必要があることを理解しています。

iタグでは、.onClick={this.removal}が添付されています。しかし、私は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')); 

あなたが削除するかを知るためにIDを渡す必要が気づいたとして、私はJSFiddle

https://jsfiddle.net/5uevnock/

Answer 1

で自分のコードが含まれています。ただし、removal関数をonClickにバインドするとすぐにエントリを削除することはできません。ここでのトリックは、removalがクリック時に呼び出される関数を返すようにすることです。

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

このようにそれを使用します。

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

の作業例：https://jsfiddle.net/LukaszWiktor/u1vfoqgp/

を