Javascript 将参数传递给react中的函数，而不使用onClick处理程序中的arrow函数_Javascript_Reactjs_Ecmascript 6

Javascript 将参数传递给react中的函数，而不使用onClick处理程序中的arrow函数

javascript reactjs ecmascript-6

Javascript 将参数传递给react中的函数，而不使用onClick处理程序中的arrow函数,javascript,reactjs,ecmascript-6,Javascript,Reactjs,Ecmascript 6,我正在映射一组像这样的对象 events = [ { id: 1, name: 'Real vs Barcelona' }, { id: 2, name: 'Celtic vs Rangers' } ]; 然后我想将id传递给更新相关事件的函数。这项工作，我是用一个箭头函数来实现的 onClick={（）=>this.props.updateEvent（event.id）} }由于事件传递您单击的相关DOM元素，因此您可以读取该元

我正在映射一组像这样的对象

events = [
   {
     id: 1,
     name: 'Real vs Barcelona'
   },
   {
     id: 2,
     name: 'Celtic vs Rangers'
   }
];

然后我想将id传递给更新相关事件的函数。这项工作，我是用一个箭头函数来实现的

onClick={（）=>this.props.updateEvent（event.id）}

}

由于事件传递您单击的相关DOM元素，因此您可以读取该元素具有的任何属性。因此，你可以做一些类似于你在文章末尾建议的事情：

MyApp类扩展了React.Component{ render（）{ 让updateEvent=（e）=>{ log（e.target.dataset.name）； } 返回( {[{id:0，名称：“foo”}，{id:1，名称：“bar”}].map（事件=>{ return

{event.name}

})} ); } } ReactDOM.render（，document.getElementById（“app”）

由于事件传递您单击的相关DOM元素，因此您可以读取该元素具有的任何属性。因此，你可以做一些类似于你在文章末尾建议的事情：

{event.name}

})} ); } } ReactDOM.render（，document.getElementById（“app”）

如果要传递的值是可序列化的，则可以将其指定为属性，如Chris在回答中所述

更通用的解决方案是创建新组件并将数据作为道具传递：

class Event extends React.Component {
  _onClick = () => this.props.onClick(this.props.event.id);

  render() {
    return (
      <p onClick={this._onClick}>{ this.props.event.name }</p>
    );
  }
}

类事件扩展React.Component{
_onClick=（）=>this.props.onClick（this.props.event.id）；
render（）{
返回(
{this.props.event.name}
);
}
}

在呼叫者中：

<div>
   {this.props.events.map(event => {
     return <Event key={event.id} event={event} onClick={this.props.updateEvent} />
   });
</div>


{this.props.events.map（event=>{
返回
});

如果要传递的值是可序列化的，则可以将其指定为属性，如Chris在回答中所述

更通用的解决方案是创建新组件并将数据作为道具传递：

class Event extends React.Component {
  _onClick = () => this.props.onClick(this.props.event.id);

  render() {
    return (
      <p onClick={this._onClick}>{ this.props.event.name }</p>
    );
  }
}

类事件扩展React.Component{
_onClick=（）=>this.props.onClick（this.props.event.id）；
render（）{
返回(
{this.props.event.name}
);
}
}

在呼叫者中：

<div>
   {this.props.events.map(event => {
     return <Event key={event.id} event={event} onClick={this.props.updateEvent} />
   });
</div>


{this.props.events.map（event=>{
返回
});

我确实找到了我想找的东西

render() {   

    return (
      <div>
         {this.props.events.map(event => {

            let updateEventHelper = () => {
               this.props.updateEvent(event.id);
            };

           return <p key={event.id} onClick={updateEventHelper}>{ event.name }</p>
         });
      </div> 
    )
}

render（）{
返回(
{this.props.events.map（event=>{
让updateEventHelper=（）=>{
this.props.updateEvent（event.id）；
};
return{event.name}
});
)
}

我确实找到了我想找的东西

render() {   

    return (
      <div>
         {this.props.events.map(event => {

            let updateEventHelper = () => {
               this.props.updateEvent(event.id);
            };

           return <p key={event.id} onClick={updateEventHelper}>{ event.name }</p>
         });
      </div> 
    )
}

render（）{
返回(
{this.props.events.map（event=>{
让updateEventHelper=（）=>{
this.props.updateEvent（event.id）；
};
return{event.name}
});
)
}

如果不想使用arrow函数，可以执行

onClick={function（）{this.props.updateEvent（event.id）}

这只在性能问题时才重要。它将在每个渲染中为每个项目创建一个新函数。您可以在ComponentWillReceiveProps上创建函数映射并将其存储在组件上，然后在循环中说

this.eventFuncs[event.id]

但我从未将其视为性能问题..如果不想使用arrow函数，可以执行

onClick={function（）{this.props.updateEvent（event.id）}

this.eventFuncs[event.id]

但我从未将其视为性能问题..我认为

e.target.name

不起作用。

元素没有这样的属性。您可能希望使用

数据-*

属性。请不要使用这种方法。它会满足您的要求，但您很难扩展“事件”对象，因为您还需要更新DOM。@尝试改进，“扩展事件”是什么意思？@Chris谢谢你的回答。我可以接受你或Felix的答案，但我想的是我下面的答案。你能评论一下这个答案中的方法，以及它是否比其他答案更好/相同/更差solutions@Chris我正在考虑向对象添加新的值/属性。然后它还需要更新DOM。我不这么认为认为

e.target.name

会起作用。

元素没有这样的属性。您可能想使用

数据-*