Question

我正在映射一个看起来像这样的对象数组

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

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

onClick={() => this.props.updateEvent(event.id)}

render() {

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

我已经读过这样做的性能影响，而且我的es-linter也显示错误。有没有人知道我可以采用另一种方法来解决这个问题并以不同的方式传递id。我认为我不想使用ES5 bind方法。

也许是这样的

render（）{

let updateEvent = (e) => {
  //This obviously won't work but something similar? 
  this.props.updateEvent(e.target);
}

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

}

Answer 1

如果您要传递的值是可序列化的，那么您可以将其指定为Chris在他的答案中提到的属性。

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

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

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

在来电者中：

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

Answer 2

由于事件传递了您单击的相关DOM元素，因此您可以读取该元素具有的任何属性。因此，您可以执行类似于帖子末尾的建议：

＆＃13;

class MyApp extends React.Component {

  render() {
    let updateEvent = (e) => {
      console.log(e.target.dataset.name);
    }
    
    return (
      <div>
         {[{id:0, name:"foo"}, {id:1, name:"bar"}].map(event => {
           return <p key={event.id} data-name={event.name} onClick={updateEvent}>{ event.name }</p>
         })}
      </div> 
    );
  }
}
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

＆＃13;

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

＆＃13;

Answer 3

我实际上已经找到了我想要的我正在寻找的东西。

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

在onClick处理程序

3 个答案: