В нашей предыдущей статье мы изучили обработчики событий, состояние и состояние мутации. Если вам нужно освежить эти концепции, не стесняйтесь перечитывать статьи, ссылки на которые приведены ниже!



Путь к мастерству реагирования - обработка событий
Как использовать одну из самых мощных функций компонентов React! hackernoon.com





Путь к мастерству реакции - понимание состояния
Состояние в React - это невероятно мощная функция компонентов на основе классов, которая чем-то похожа на свойства с несколькими… hackernoon.com



При использовании React вы обнаружите, что постоянно создаете обработчики событий для компонентов, поскольку такова динамическая природа React. Во многих из этих случаев вам нужно будет передать параметр этому обработчику событий. Когда я изначально изучал React, я обнаружил, что эта задача сбивает меня с толку, и я не совсем понимал, что нужно и что не нужно выполнять. Я не хочу, чтобы вы испытали такое же разочарование, как и я, поэтому здесь я покажу вам один простой, эффективный и работоспособный способ передачи параметров обработчикам событий React.

Жизненный опыт

Если вы читаете это и не знаете, что такое обработчики событий или параметры, я настоятельно рекомендую вернуться к некоторым из моих предыдущих статей и продолжить свой путь до этого момента. В любом случае, для полноты картины я дам несколько подробных объяснений их основных концепций.

Обработчики событий - в основном частные функции компонента React, объявленные в объявлении класса компонента React.

Параметры - информация, которую вы даете функции (обработчику событий), на которую она затем действует.

Все догнали? Большой! Давайте начнем.

Настройка нашего класса

class RandomFunction extends React.Component {
  render() {
    return <button>Press to hear your message.</button>;
  }
}

Пока все довольно просто. Базовый компонент React с кнопкой. Вот и все. Ничего сложного. А теперь добавим обработчик событий!

Добавление обработчика событий

class RandomFunction extends React.Component {
  render() {
    return <button>Press to hear your message.</button>;
  }
  
  displayMessage(message) {
    console.log(message)
  }
}

Все еще довольно просто. Мы добавили обработчик событий displayMessage, который принимает параметр message и затем записывает его в консоль. Теперь все, что нам нужно сделать, это привязать кнопку к обработчику события и передать ему свое собственное небольшое сообщение.

Собираем все вместе

let message = "Hey there!";
class RandomFunction extends React.Component {
  render() {
    return <button onClick={this.displayMessage.bind(this,
    message)}>Press to hear your message.</button>;
  }
  
  displayMessage(message) {
    console.log(message)
  }
}

Это может показаться намного более сложным, но на самом деле это не так. Позвольте мне рассказать вам об этом.

  • Сначала мы создали наше сообщение в message (я знаю, очень креативно!) И сохранили его в глобальной области. Очевидно, это непрактично, однако для данного руководства этого будет достаточно. Пока компонент может ссылаться на переменную, он будет работать.
  • Затем мы добавили функцию onClick к нашей кнопке, которая активируется при каждом нажатии (довольно понятно).
  • Чтобы затем сослаться на нашу функцию и передать наше сообщение в качестве параметра, мы используем this.eventhandler.bind(this, parameters), имя нашего обработчика событий, в данном случае displayMessage. Это связывает экземпляр this (компонент) с функцией, поскольку это не выполняется автоматически React, поэтому вызов this.props или this.state приведет к нулю.

Вот и все! Простой и легкий способ передать аргументы обработчику событий! Если у вас есть вопросы, не стесняйтесь спросить! Если вам понравилась статья, подписывайтесь на меня, чтобы быть в курсе моих ежедневных сообщений!

Спасибо за прочтение!