Question

我有一个基于类的组件，它将向下传递道具

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

有没有办法通过点击的道具传递密钥/ ID - 备份到onClickHandler？

我已经在这里查看了其他类似的问题，并尝试使用bind将键添加到单击的道具但是在将键传递给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>
  )
}

Answer 2

是的，使用clickHandler函数，您将在参数中获得一个事件对象：

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

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

Answer 3

您可以使用bind将参数列表传递回侦听器。

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

调用事件时的第一个参数是id

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

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

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

3 个答案: