Вопрос:

Как передать аргументы в функции в React JS?

reactjs

50814 просмотра

2 ответа

470 Репутация автора

  1. Я хочу отобразить электронную почту человека в окне предупреждения. Но я не знаю, как передать электронную почту в качестве аргументов в метод 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>
        );
      }
    }
    
Автор: user3528213 Источник Размещён: 02.06.2015 11:35

Ответы (2)


68 плюса

24544 Репутация автора

Решение

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:56

3 плюса

611 Репутация автора

Использование функции стрелки и плагина 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
Вопросы из категории :
32x32