在 React 中处理组件的 onClick答案

【问题标题】：Handling an onClick on a component in React在 React 中处理组件的 onClick
【发布时间】：2021-05-19 08:44:16
【问题描述】：

假设我有一个 react 应用程序，并且我有组件 A 和组件 CountryCard，假设组件 A 使用地图指令显示多次组件 CountryCard，作为一副纸牌

{this.props.countries.map(country => <CountryCard country={country}...

如何处理对一张 CountryCard 的点击？我使用 onClick 就够了吗

{this.props.countries.map(country => <CountryCard country={country} onClick={this.handleCountryClick(country)}...

或者我必须添加一个事件监听器，我该怎么做？提前致谢

拉斐尔

【问题讨论】：

标签： javascript reactjs jsx react-props react-component

【解决方案1】：

您应该将 this.handleCountryClick 传递给 CardComponent

{this.props.countries.map(country => <CountryCard country={country} onCountryClick={this.handleCountryClick}...

然后在 CountryCard 内部调用 props.onCountryClick，例如：

<div onClick={() => this.props.onCountryClick(this.props.country)}></div>

【讨论】：

【解决方案2】：

应该使用事件，因为有事件回调：

onClick={e => this.handleCountryClick(country)}

或

onClick={this.handleCountryClick}

【讨论】：

【解决方案3】：

onClick 继续使用 Dom 元素

const CountryCard  = ({onClick}) => (<div onclick = {onClick}></div>)
/*maybe do a data attribute if you don't want `country` in perantasis*/
const handleCountryClick = (e) => {
    var attr = e.currentTarget.getAttribute("country")
}

这是一个功能组件的示例

const CountryCard  = ({onClick, country}) => (<div country = {country} onclick = {onClick}></div>)

我只是给你一个使用数据属性的选项，这样你就不必内联调用事件。

并提醒您单击事件在 Dom 元素上进行。

我的工作中没有使用 React 类。

【讨论】：