如何在地图函数中访问数据 onClick in react.

Question

我很好奇如何能够访问映射函数中的数据，以便在 React 中的 onClick 函数中传递函数时可以在事件参数中使用它。

这是我的句柄点击函数。我想使用 handleClick 中的事件从映射函数访问"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);
}