Question

我想在点击我设置的onClick函数时传递我的元素的属性。我不知道如何访问元素的属性。具体来说，我想将我的Google Map Marker的position属性传递给我的onClick函数，这样我就可以存储被点击到数组中的标记的位置。

我的标记代码如下所示：

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

我想传递位置或位置的lat和lng属性。如果我尝试传递位置，我会收到一个错误，指出未定义的位置。 Lat和lng只给我未定义的值。

注意：position，clickable是Marker元素的原生属性。

Answer 1

我认为在反应中，你应该存储状态的所有数据，而不是通过参数传递数据。对于你的情况，在状态中创建一个位置obj，然后在正确的情况下更新（componentDidMount，componetWillMount等）。当单击Marker时，您只需更改state.position，然后react将重新呈现UI。

Answer 2

EDITED：你可以尝试

with open("filename.txt","w") as fl:
    for i in range(0,38):
        #prepare ur list here 


        lst=str(i)+",2,3\n"#dummy list
        fl.write(lst)
    fl.close()

#to erase all content of file uncomment these line
#erase_fl=open("filename.txt","w")
#erase_fl.truncate() 
#erase_fl.close()

并且在this.handler中你可以

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

event.target给出了natvie DOM元素并通过本机DOM获取属性 https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Answer 3

您只需将其添加到绑定到onClick的回调函数即可。像这样（假设位置处于状态，但可能是道具或硬编码）：

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

编辑：我刚刚阅读了评论。如果您有一系列标记，您可以将这些位置分配给这样的点击处理程序（假设您在从源头收到它们时将其设置为状态）：

  render() {

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

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

3 个答案: