0

当单击我设置的 onClick 函数时，我想传递我的一个元素的属性。我不知道如何访问元素的属性。具体来说，我想将我的谷歌地图标记的位置属性传递给我的 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 元素的原生属性。

4

3 回答 3

1

编辑：你可以试试

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

在 this.handler 中你可以 

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

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

于 2018-02-04T06:31:43.123 回答
1

您只需将其添加到绑定到 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>
    )
  }
于 2018-02-04T09:19:04.640 回答
1

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

于 2018-02-04T06:16:13.703 回答