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

【问题标题】：How do I pass an element's property to a function in React?如何将元素的属性传递给 React 中的函数？
【发布时间】：2018-07-14 06:33:20
【问题描述】：

我想在单击时将我的元素的属性传递给我设置的 onClick 函数。我不知道如何访问元素的属性。具体来说，我想将我的谷歌地图标记的位置属性传递给我的 onClick 函数，以便我可以将被点击的标记的位置存储到一个数组中。

我的标记代码如下所示：

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

我想传递位置或位置的 lat 和 lng 属性。如果我尝试通过位置，我会收到错误说明位置未定义。 Lat 和 lng 只是给我未定义的值。

注意：位置、可点击是标记元素的原生属性。

【问题讨论】：

markerClick(e)} clickable={true}} e 将是元素本身。
那么我该如何访问 onClick 函数中元素的位置属性呢？ e.position.lat?因为那给了我一个错误
这是组件的自定义属性。那么请为该位置设置变量。那会更容易。将位置保存到状态。然后这样的东西。
问题在于，我正在使用来自 API 的数据循环更新标记的位置。我不知道如何将位置作为状态变量。
@sufiyansadiq 如果数据来自 api 并被存储，那么您始终可以通过索引访问它们。只需将索引传递给点击处理程序：onClick{()=>markerClick(index)} 并在markClick 函数中，只需使用data.businesses[index].coordinates.lat 即可访问它们。

标签： javascript css reactjs google-maps react-google-maps

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：

谢谢。我喜欢这个解决方案背后的想法。但不幸的是，我收到一条错误消息：无法读取未定义的属性 getAttribute()。

【解决方案3】：

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

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

编辑：我刚刚阅读了 cmets。如果您有一组标记，则可以像这样将位置分配给单击处理程序（假设您在从源接收它们时将位置设置为状态）：

  render() {

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

【讨论】：