Question

因此，我有一个React组件，在组件内部有一个函数-showCoinSearch，它对数据进行排序，然后为已排序数据的每个对象创建一个option元素。我想在这个要处理handleClick的特定组件内部创建一个新函数。但是事件监听器不起作用，我尝试添加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);
    });
  }
}

Answer 1

我强烈建议您从这个惊人的教程开始：

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} />

如何向位于React组件中函数内部的元素添加事件侦听器？

1 个答案: