如何在地圖功能內訪問數據以進行onClick反應

Question

我很好奇一個人可能如何訪問map函數中的數據，以便在React中的onClick函數中傳遞一個函數時可以在event參數中使用它。

這是我的handleClick函數。 我想使用handleClick中的事件從map函數訪問“ d”命名屬性。如果還有另一種方法可以訪問變量“ d”，那么我可以在handleClick中使用它，那真的很棒。 我找不到針對這種情況的特定解決方案，所以我想知道是否可以得到一些幫助。 謝謝！

// Gain access to the parameter data from the map function  
public handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
    console.log(event);
  }

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={this.handleClick} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

Answer 1

只需將其作為inline function傳遞

  public render() {
    return (
      <div className="">
        {this.props.data.slice(0, MAX_RESULTS_LENGTH).map((d: any) => (
          <a tabIndex={0} onClick={e => this.handleClick(e, d)} key={d.id}>
            {d.address}
          </a>
        ))}
      </div>
    );
  }
}

public handleClick(event: React.MouseEvent<HTMLAnchorElement>, d: any) {
    console.log(event, d);
}