Как передать аргументы в функции в React JS?
50814 просмотра
2 ответа
Я хочу отобразить электронную почту человека в окне предупреждения. Но я не знаю, как передать электронную почту в качестве аргументов в метод 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> ); } }
Ответы (2)
68 плюса
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
или использовать связывание, чтобы сохранить надлежащий контекст вашей .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);
Показанный в примере здесь: Реагировать - Связь между компонентами
Автор: Austin Greco Размещён: 02.06.2015 11:563 плюса
Использование функции стрелки и плагина 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');
}
}
Автор: miguel savignano
Размещён: 01.04.2017 07:19
Вопросы из категории :
- reactjs Реагируйте на js и bootstrap модально из примеров на github
- reactjs реагировать - ссылка на тег
- reactjs this.setState не объединяет состояния, как я ожидал
- reactjs Rerender вид в браузере изменить размер с React
- reactjs Рендеринг компонента React в поповере Bootstrap
- reactjs Как получить доступ к пользовательским атрибутам из объекта события в React?
- reactjs Как мне симулировать события браузера при написании тестов для React js?
- reactjs React.js: избегайте обновлений редактируемого в данный момент ввода
- reactjs ReactJS: моделирование двунаправленной бесконечной прокрутки
- reactjs Reactjs: Неожиданный токен '<' Ошибка
- reactjs Facebook React.js: как вы отображаете компоненты с состоянием на сервере?
- reactjs React.js: Идентификация различных входов с помощью одного обработчикаChange
- reactjs Реактивен ли response.js с компонентами jQuery / UI
- reactjs Почему концепция React Virtual DOM считается более производительной, чем грязная проверка моделей?
- reactjs Бесконечная прокрутка с помощью React JS
- reactjs setInterval обратный вызов с контекстом
- reactjs Простая форма отправки с файлами
- reactjs Reactjs - правильная установка встроенных стилей
- reactjs Доступ к реквизитам внутри кавычек в React JSX
- reactjs React JSX: выбор «selected» для выбранного варианта <select>