Javascript Reactjs从Dexie.js中删除项目

这个例子使用Reactjs，我有一个CRUD应用程序没有D，这是我目前需要的。虽然您可以在数据库中输入和存储新项目，但我不确定如何选择已添加和删除的每个项目。我知道你必须通过他们的ID来选择他们

我用i标记附加了一个

.onClick={this.removation}

。但是，我不确定要向

删除功能添加什么

 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'));

var datastored=new-Dexie（'MyPlace'）；
datastored.version（1）.stores（{entries:'++id，title，entry'}）；
datastored.open（）.catch（函数（err）{alert（“无法打开数据库：+err）}）；
var Dashboard=React.createClass({
getInitialState:函数（）{
返回{results:[]}
},
runcheck:function（）{
设arr=[]；
数据存储项
.每个（（上传）=>arr.push（上传））
.then（（）=>this.setState（{results:arr}））；
},   
componentDidMount:function（）{
这是runcheck（）；
},
删除：函数（）{
datastored.entries.delete（）；
},    
sendthru:function（）{
var newInput={
标题：this.input.value，
条目：this.inpuntery.value
};
datastored.entries.add（newInput）.然后（（）=>this.runcheck（））；
this.input.value=''；
this.inpuntery.value=''；
},
renderdem:function（）{
var list=this.state.results.map（结果=>{
返回
{result.id}
{result.title}
{result.entry}
});       
返回(
标题

this.inputTitle=el}/>
条目

this.inpuntery=el}className=“表单控制”>
添加
{list}
);   
},    
render:function（）{
返回此.renderdem（）；}
});
ReactDOM.render（，document.getElementById（'main'））；

我已经在JSFIDLE中包含了我的代码

正如您所注意到的，您需要传递id才能知道要删除什么。但是，在将
删除
函数绑定到
onClick
时，不能立即删除条目。这里的技巧是让
删除
返回一个函数，当单击发生时，该函数将被调用

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>



工作示例：