javascript - 处理对动态生成的按钮的点击

Question

背景

你好，我对 C# 和 VB.net 非常熟悉，但我是 Javascript 的新手，目前也在尝试学习 React。我正在开发一个用于学习目的的简单购票应用程序。我能够在一天内用 Angular 制作这个应用程序，但事实证明 React 更难。很明显，我需要学习 React 的 JS 基础知识，而我觉得我不需要任何以前的知识来学习 Angular。

问题

我启动了一个 Create React App 项目并开始修补它(我通过修补学习得最好)。我目前能够为每个参展商(剧院链)生成一个按钮。这些按钮是动态生成的，因为最终我不知道有多少参展商。经过大量的谷歌搜索和 Stack Overflowing，这是我想出的代码(请原谅任何菜鸟语法/格式):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class TicketOrder extends Component {
  constructor () {
    super();
    
    this.handleClick = this.handleClick.bind(this);
    
    // List of Exhibitors
    this.exhibList = {
      TestA     : "abc",
      TestB     : "bcd",
      TestC     : "cde"
    };
  }
  
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Ticketz</h2>
          <p id="userGuide">Hello. Please select an Exhibitor:<br/><br/> </p>
        </div>
        <br/>
        <div>
        {
          Object.keys(this.exhibList).map(function(key) {
            return (<p><button className="button" onClick={key => this.handleClick}>{key}</button></p>);
          })
        }
        </div>
    </div>
    );
  }
  
  handleClick () {
    console.log("Clicked!");
  };
}

export default TicketOrder;

我想我犯了一些基本错误，我承认我还没有完全掌握 React 概念，所以请放轻松!无论我尝试什么，我都会遇到的错误是:

"Uncaught TypeError: Cannot read property 'handleClick' of undefined".

我已经尝试了上述代码的许多变体，但都没有成功。谁能告诉我我的代码/概念有什么问题吗？

一旦这个问题得到解决，我仍然有一个我还没有能够概念化的潜在问题，即让 handleClick 知道哪个按钮被按下了。例如，如果用户按下 TestA，console.log("abc")。最终，一旦我对 JS 和 React 有了更多了解，我猜我会根据按下的按钮更改 handleClick 中组件的状态。任何关于如何实现这一目标的见解都将不胜感激。

Answer 1

您尝试访问的“this”不可访问，因为您在函数范围内。为避免这种情况，您可以使用箭头函数语法。 此外，map 函数在您的键数组上进行迭代，因此您只需将此键作为参数提供给 handleClick 函数。 你的映射会像这样:

 {
    Object.keys(this.exhibList).map((item, index) => {
       return (<p><button key={index} className="button" onClick={() => this.handleClick(item)}>{item}</button></p>);
    })
 }

在箭头函数 {} 中，“this”将是您要访问的那个(又名 TicketOrder)。还要记住为您映射的任何元素提供唯一的键属性(我在前面的示例中放置了索引)，这有助于 React 算法知道哪些元素发生了变化。参见here

你的 handleClick 看起来像这样:

handleClick = (message) => {
  console.log("Clicked!", message);
};

您可以看到不同的键作为参数传递并根据用户单击的按钮显示。

这就是整个事情对我的看法:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class TicketOrder extends Component {
  // Drop the constructor you don't need it anymore, especially with Create React App
  exhibList = {
    TestA       : "abc",
    TestB       : "bcd",
    TestC       : "cde",
  }

  handleClick = (key) => {
    console.log("Clicked!", key);
  };

  render() {
    return (
      <div className="App">
          <div className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h2>Ticketz</h2>
              <p id="userGuide">Hello. Please select an Exhibitor:<br/><br/> </p>
          </div>
          <br/>
          <div>
          {
              Object.keys(this.exhibList).map((item, index) => {
                  return (<p><button key={index} className="button" onClick={() => this.handleClick(item)}>{item}</button></p>);
              })
          }
          </div>
     </div>
    );
  }
}

export default TicketOrder;