你需要绑定this.dlt_item为

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

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

代码

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

您可以将其filter用作拼接而不是拼接

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

利用 .bind(this, yourKey)

在你的例子中：

var App = React.createClass({
  getInitialState(){
    return {
      items: [1, 2, 3]
    }
  },
  dlt_item(key){
    console.log(key);
  },
  renderItem(){
    return this.state.items.map((item, i) => <li key={i}>{item}
        <button>Edit</button>
        <button onClick={this.dlt_item.bind(this, item)}>Delete</button>
      </li>
    )
  },
  render(){
    return (
      <ul>
        {this.renderItem()}
      </ul>
    )
  }
});

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

实现相同结果的另一种方法可能是从您那里返回一个柯里化函数 Component

该方法将接受一个值并在执行操作之前等待事件被调用。

我更喜欢这种方式，因为我喜欢尽可能地限制 JSX 中的 javascript。

dlt_item(key){
  // return the event listener
  return function(e) {
    // do something with the state
  }.bind(this) // bind the inner functions this to the Component
}

当你想调用函数时，你可以这样做

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

var App = React.createClass({
   getInitialState(){
     return {
       items:[1,2,3]
     }
   },
   // this function will take your key
   dlt_item(key){
     // return the event listener
     return function(e) {
       this.setState({
         items: splice(this.state.items, key, 1)
       })
     }.bind(this)
   },
   renderItem(){
     return this.state.items.map((item,i)=>  (
       <li key={i}>{item}&nbsp;
         <button>Edit</button>
         <button onClick={this.dlt_item(i)}>Delete</button>
       </li>
     ))
   },
   render(){
      return(
        <ul>
          {this.renderItem()}
        </ul>
      )
   }
})

// immutable splice helper function
const splice = (arr, index, count = 0, ...items) => {
  return [
    ...arr.slice(0, index),
    ...items,
    ...arr.slice(index + count)
  ]
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

<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>
<main id="app"></main>