在 React 中处理组件上的 onClick

Question

假设我有一个 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)}...

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

拉斐尔

Answer 1

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

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

或

onClick={this.handleCountryClick}

Answer 2

您应该将 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>

Answer 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 类。

在 React 中处理组件上的 onClick

Handling an onClick on a component in React

javascript

jsx

reactjs

react-props

react-component