-
Я хочу отобразить электронную почту человека в окне предупреждения. Но я не знаю, как передавать электронную почту в качестве аргументов метода 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> ); } }
Как передать аргументы в функции в React js?
Ответ 1
Путь 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);
Ниже приведен пример: Реагировать - обмениваться между компонентами
Ответ 2
Использование функции стрелки и плагина babel "свойства класса преобразования"
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');
}
}