Javascript React props id绑定到无状态组件中的onClick

我有一个基于类的组件，它正在传递道具

onClickHandler = () => {doSomething};

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

onClickHandler=（）=>{doSomething}；
返回(
);

…到无状态组件：

const Container = props => {

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

const Container=props=>{
返回(
{props.jobs.map（job=>

{job.title}

)}
);
}

有没有办法通过单击的prop-back将key/id传递给onClickHandler

---

我在这里查看了其他类似的问题，并尝试使用bind将键添加到单击的道具，但将键传递到onClickHandler时遇到了实际问题。谢谢你的建议

将函数传递给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>
  )
}

const Container=props=>{
返回(
{props.jobs.map（job=>
props.clicked（job.id）}key={job.id}>
{job.title}

)}
)
}

是的，通过clickHandler函数，您可以在参数中获得一个事件对象：

onClickHandler = (event) => {// use the event obj to get key/id };

---

您可以使用该事件对象来查找所单击的目标元素中任何元素的键/id。

您可以使用

bind

将参数列表传递回侦听器

<p onClick={ props.clicked.bind(null, job.id) } key={job.id}>

---

这很好，我没想到我能做到-谢谢！我也遇到过同样的问题，你的解决方案也奏效了，但我不知道为什么会奏效。你能解释一下为什么作为道具传入一个箭头函数可以让你用一个参数调用这个函数，而作为道具传入函数却不允许使用参数吗？@AdamStox

onClick

需要一个函数，它会在单击元素时调用这个函数。调用函数时，它将传入事件对象。因此，如果您有

onClick={props.clicked}

，那么它将被称为

props.clicked（e）

。但是，使用内联函数可以忽略事件参数：

（e）=>props.clicked（job.id）

。我希望这有帮助。

onClickHandler = (id) => {
   doSomething(id);
};

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