如何將元素的屬性傳遞給React中的函數？

Question

當我單擊已設置的onClick函數時，我想傳遞我的元素的屬性。 我不知道如何訪問元素的屬性。 具體來說，我想將Google Map Marker的position屬性傳遞給我的onClick函數，以便可以存儲單擊到數組中的標記的位置。

我的標記代碼如下所示：

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

我想傳遞position或position的lat和lng屬性。 如果我嘗試通過位置，則會收到錯誤消息，指出未定義位置。 緯度和經度只是給我未定義的值。

注意：position，clickable是Marker元素的本機屬性。

Answer 1

我認為在反應中，您應該將所有數據都存儲在狀態中，而不是通過參數傳遞數據。對於您的情況，請在狀態中創建一個位置obj，然后在合適的情況下進行更新（componentDidMount，componetWillMount等）。 當單擊“標記”時，您只需更改state.position即可，然后react將重新渲染UI。

Answer 2

編輯：您可以嘗試

<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

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