>我想在警报窗口中显示个人的电子邮件。但是，我不知道如何将email作为参数传递给displayAlert方法。此外，它也不会让我使用。所以，我必须将一个变量赋给displayAlert methos，并在onClick中使用它。我不知道为什么不让我直接打电话给他。
class People extends React.Component{
render (){
var handleClick = this.displayAlert;
var items = this.props.items.map(function(item) {
return(
<ul key = {item.id}>
<li>
<button onClick= {handleClick}>{item.lastName + ',' + item.firstName}</button>
</li>
</ul>
)
});
return (<div>{items}</div>);
}
displayAlert (){
alert('Hi');
}
}
class PersonList extends React.Component{
render () {
return (
<div>
<People items={this.props.people}/> /* People is an array of people*/
</div>
);
}
}
ES6方式：
使用箭头函数=>
const items = this.props.items.map((item) => (
<ul key={item.id}>
<li>
<button onClick={() => this.displayAlert(item.email)}>
{item.lastName + ',' + item.firstName}
</button>
</li>
</ul>
));
onClick匿名函数被调用并执行this.displayAlert(item.email)
ES5方式：
您可以使用.bind执行此操作，并将参数传递到那里。
你也应该传递这个或使用bind来保持你的.map函数上的正确上下文：
var items = this.props.items.map(function(item) {
return (
<ul key={item.id}>
<li>
<button onClick={this.displayAlert.bind(this,item.email)}>
{item.lastName + ',' + item.firstName}
</button>
</li>
</ul>
);
},this);
