我想在提醒窗口中显示人员的电子邮件。但是,我不知道如何将电子邮件作为参数传递给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>
);
}
}
答案 0 :(得分:64)
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);
答案 1 :(得分:2)
使用arrow函数和babel插件“transform-class-properties”
class People extends React.Component {
render() {
return (
<ul>
{ this.props.items.map( (item) => (
<li key={item.id}>
<button onClick={this.displayAlert(item)}>
{item.lastName + ', ' + item.firstName}
</button>
</li>
))}
</ul>
)
}
displayAlert = (item) => (event) => {
// you can access the item object and the event object
alert('Hi');
}
}