在反应中将索引从一个函数传递到另一个函数

我有一个项目列表，单击删除按钮后该项目将被删除。我知道执行此操作的步骤，但我不知道如何将密钥传递到 dlt_item 范围。

http://jsfiddle.net/3Ley7uac/1/ http://jsfiddle.net/3Ley7uac/1/

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3]
   }
   },
   dlt_item(key){
   //how to get index/id here?
   },
   renderItem(){
   return this.state.items.map((item,i)=> <li key={i}>{item}
   &nbsp;
   <button>Edit</button>
   <button onClick={this.dlt_item}>Delete</button>
   </li>
   )
   },
   render(){
      return(
      <ul>
        {this.renderItem()}
      </ul>
      )
   }
})

你需要绑定this.dlt_item as

<button onClick={this.dlt_item.bind(this, i)}>Delete</button>

并在你的dlt_item函数，您可以从传递的索引中拼接您的状态数组。

Code

var App = React.createClass({
   getInitialState(){
   return {
     items:[1,2,3]
   }
   },
   dlt_item(key){
   console.log(key);
   this.state.items.splice(key, 1);
   this.setState({items: this.state.items});
   //how to get index/id here and do setState
   },
   renderItem(){
   return this.state.items.map((item,i)=> <li key={i}>{item}
   &nbsp;
   <button>Edit</button> 
   <button onClick={this.dlt_item.bind(this, i)}>Delete</button>
   </li>
   )
   },
   render(){
      return(
      <ul>
        {this.renderItem()}
      </ul>
      )
   }
})

React.render(<App />, document.getElementById('container'));

JSFIDDLE http://jsfiddle.net/3Ley7uac/4/

您可以使用而不是拼接filter as

dlt_item(key){
   var items = this.state.items.filter(function(obj){
    return obj != (key + 1);


   });
   console.log(items);
   this.setState({items: items});
   //how to get index/id here and do setState
   },

JSFIDDLE http://jsfiddle.net/3Ley7uac/11/