在React中处理组件上的onClick

Question

假设我有一个react应用，我有组件a和组件CountryCard，假设组件a多次显示组件CountryCard，作为一副牌，通过使用map指令，如

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

我如何处理点击一个国家卡?使用onClick作为

是否足够?

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

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

拉斐尔

Answer 1

你应该传递这个。handleCountryClick to CardComponent

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

则调用props。在CountryCard内部的onCountryClick，示例:

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

Answer 2

事件应该被使用，因为有一个回调事件:

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

或

onClick={this.handleCountryClick}

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>)

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

并提醒你点击事件发生在Dom元素上

我在工作中不使用React类。