javascript - 在无状态组件中将 props id 绑定(bind)到 onClick

Question

我有一个基于类的组件向下传递 props

onClickHandler = () => {doSomething};

return (
   <Container 
    jobs={this.props.jobs}
    clicked={this.onClickHandler}
   />
);

...到无状态组件:

const Container = props => {

 return (
  <div>
   {props.jobs.map(job => 
     <p onClick={props.clicked} key={job.id}>
        {job.title}
     </p>
    )}
   </div>
 );
}

有没有办法通过 clicked 属性传递 key /ID - 返回到 onClickHandler？

我在这里查看了其他类似的问题，并尝试使用 bind 将 key 添加到 clicked Prop ，但在将 key 传递给 onClickHandler 时遇到了真正的问题。感谢您的任何建议!

Answer 1

如何将函数传递给 onClick。

您可以将参数传递给 props.clicked()。

这个怎么样:

const Container = props => {
  return (
    <div>
      {props.jobs.map(job => 
        <p onClick={() => props.clicked(job.id)} key={job.id}>
          {job.title}
        </p>
      )}
    </div>
  )
}