如何将元素的属性传递给React中的函数？

Question

I'd like to pass a property of an element of mine when clicked to the onClick function that I have setup. I don't know how to access the property of the element though. To be specific, I'd like to pass the position property of my Google Map Marker to my onClick function so that I could store the position of the marker that was clicked into an array.

My Marker code looks like this:

<Marker position={{lat:"some value", lng:"some value"} 
onClick{()=>markerClick(what do I pass here?)} clickable={true}}

I'd like to pass either the position or, position's lat and lng property. If I try passing position,I get an error stating position not defined. Lat and lng just give me undefined values.

Note: position, clickable are native properties of the Marker element.

Answer 1

I think in react, all data you should store in state, instead of passing data by parameter.For your case, create a position obj in state, then update in right situation(componentDidMount, componetWillMount and so on). And when click Marker, you can just change the state.position, then react will re-render UI.

Answer 2

EDITED: you can try

<Marker
  position={lat:"some value", lng:"some value"} 
  onClick={ this.handler }
  clickable={ true }
/>

and in this.handler you can

this.handler = (event) => {
  event.target.getAttribute('position');
}

event.target give the natvie DOM element and just get the properties by native DOM https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Answer 3

You can just just add it to the callback function that you bind to the onClick. Like so (this is assuming the position is in state, but could be in props or hard-coded):

  render() {
    const { position } = this.state;
    return (
      <Marker position={position}
      onClick={() => this.handleClick(position)} />
    )
  }

EDIT: I've just read the comments. If you have an array of markers, you can assign the positions to the click handlers like this (assuming you set your positions in state when you receive them from your source):

  render() {

    const { positions } = this.state;
    const markers = positions.map((p, i) => 
      <Marker key={i} 
              position={p} 
              onClick={() => this.handleClick(p)} />);
    return (
      <div>
        {markers}
      </div>
    )
  }