Javascript 在react中将索引从一个函数传递到另一个函数

我有一个项目列表，点击删除按钮，项目将被删除。我知道执行此操作的步骤，但我一直在思考如何将密钥传递到dlt_项目范围

var-App=React.createClass({
getInitialState（）{
返回{
项目：[1,2,3]
}
},
dlt_项目（关键）{
//如何在此处获取索引/id？
},
renderItem（）{
返回this.state.items.map（（item，i）=>
{item}
编辑
删除

)
},
render（）{
返回(

{this.renderItem（）}

)
}
})

您需要将

此.dlt\u项绑定为

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

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
   },


您可以使用
过滤器
代替拼接

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

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
   },

使用
.bind（这个，你的钥匙）

在您的示例中：

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

var-App=React.createClass({
getInitialState（）{
返回{
项目：[1、2、3]
}
},
dlt_项目（关键）{
控制台日志（键）；
},
renderItem（）{
返回this.state.items.map（（item，i）=>
{item}
编辑
删除

)
},
render（）{
返回(

{this.renderItem（）}

)
}
});
React.render（，document.getElementById（'container'）；
实现相同结果的另一种方法是从组件返回当前函数

该方法将获取一个值，并在执行操作之前等待调用事件

我更喜欢这种方式，因为我喜欢尽可能地限制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（）{
返回{
项目：[1,2,3]
}
},
//此功能将占用您的钥匙
dlt_项目（关键）{
//返回事件侦听器
返回函数（e）{
这是我的国家({
项目：拼接（this.state.items，键，1）
})
}.绑定（此）
},
renderItem（）{
返回this.state.items.map（（item，i）=>(
{item}
编辑
删除

))
},
render（）{
返回(

{this.renderItem（）}

)
}
})
//不可变剪接辅助函数
常量拼接=（arr、索引、计数=0，…项）=>{
返回[
…arr.slice（0，索引），
…项目，
…arr.slice（索引+计数）
]
}
ReactDOM.render(
,
document.getElementById（'app'）
)

除了使用splice外，你还可以做一些过滤之类的事情吗？如何操作按键是你的选择。拼接是我找到的最简单的方法。您还可以过滤掉数据