javascript - 如何在 React 中的 props 中发送两个参数函数？

Question

我有一个函数，它接受两个参数，之前它只接受一个参数，因此将其传递到 props 中，如下所示:-

mixed1.map((cat1) => (<ServicesCategoryOption category1={cat1.categories} setacatid={i=>this.setacatid(i)}/>))

但现在我将 setacatid 更改为:-

setacatid(a,b){
    console.log(b);
    this.setState({                     
        catidofclicked:a,
        catnameofclicked:b
    },function(){
        localStorage.setItem('selecteditem',this.state.catidofclicked);
        localStorage.setItem('selectedname',this.state.catnameofclicked);           
    });
}   

那么现在需要两个参数 a 和 b 如何在 props 中传递它？

Answer 1

当您使用箭头函数语法时，可以将多个参数传递给事件处理程序

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(a, b)=>this.setacatid(a, b)}
      />
))

或者你可以简单地写

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(...args)}
      />
))

可以简单地写为

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={this.setacatid}
      />
))

使用第一种方法的唯一优点是您也可以传递自定义值，例如

mixed1.map((cat1) => (
      <ServicesCategoryOption 
           category1={cat1.categories} 
           setacatid={(...args)=>this.setacatid(1, ...args)}
      />
))

通过这种方式，您可以从子级传递许多参数并在函数中接收它们，而不必担心每次要添加新参数时都添加参数