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

Question

I have a class based component that is passing props down

onClickHandler = () => {doSomething};

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

...to a stateless component:

const Container = props => {

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

Is there a way to pass on the key/id via the clicked prop - back up to the onClickHandler?

I have looked at other similar questions on here and have tried to use bind to add the key to the clicked prop but am having real trouble passing the key on to the onClickHandler. Thank you for any advice!

Answer 1

How about passing a function to onClick .

You can the pass along arguments to props.clicked() .

How about this:

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

Answer 2

Yeah, with the clickHandler function, you get an event object in the argument:

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

You can use that event object to find the key/id of any element inside the target element you clicked.

Answer 3

You can use bind to pass the arguments list back to the listener.

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

And first argument when the event is invoked has the id

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

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