我想在警报窗口中显示该人的电子邮件。但是,我不知道如何将电子邮件作为参数传递给displayAlert方法。此外,它也不会让我使用。因此,我必须将displayAlert方法分配给变量,并在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
并在其中传递参数来执行此操作。
您还应该传递this
或使用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);
在此处的示例中显示:React-在组件之间通信
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句