Как добавить слушатель события в элемент, который находится внутри функции в компоненте React? - PullRequest
Новая
       11

Как добавить слушатель события в элемент, который находится внутри функции в компоненте React?

0 голосов
/ 18 октября 2018

Итак, у меня есть компонент React, внутри компонента у меня есть функция - showCoinSearch, которая сортирует данные, а затем для каждого объекта отсортированных данных создает элемент option.Я хочу создать новую функцию внутри этого конкретного компонента, который будет обрабатывать Click.Но прослушиватель событий не работает, я пытался добавить handleClick и this.handleClick () - но React не видит эту функцию ... 

export default class AddCoin extends Component { 
  handleClick(e) {
    console.log('HANDELED')
  }
  showCoinSearch(e) {
  //...someCode to sort data
     sortedData.forEach(object => {
  const option = document.createElement("option");
  //The Problem lies here
  //this.handleClick and handleClick are not working
  option.addEventListener("click", handleClick); // How to handleClick??
  option.value = object.currency;
  coinsList.appendChild(option);
    });
  }
}

1 Ответ

0 голосов
/ 18 октября 2018

Я настоятельно рекомендую вам начать с этого удивительного урока:

https://reactjs.org/docs/thinking-in-react.html

Он покажет вам, как думать о приложении с ReactJS, это сэкономит вам много времени.

Ваш код может быть преобразован в нечто вроде этого: 

import React from 'react'

export default class AddCoin extends Component { 
  // more on arrow functions: 
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
  handleClick = e => {
    console.log('HANDELED')
    this.props.onClick(e.target.value) // im returning the click to the parent
  }

  render() {
    const { options } = this.props
    return(
      <select>
        {options.map(op => <option onClick={this.handleClick} value={option.value}>{option.text}</option>)}
      </select>
    )
  }
}

Это предполагает, что ваш компонент инициализируется в родительском компоненте, получая оттуда данные, например: 

const options = [{value: 'value', text: 'text', ...}]

<AddCoint onClick={this.myParentOnClickFunction} options={options} />
...