React - onClick 用于动态生成的组件

Posted 2023-02-22

【中文标题】React - onClick 用于动态生成的组件

【英文标题】：React - onClick for dynamically generated components

【发布时间】：2017-11-26 08:48:16

【问题描述】：

我正在编写一个简单的 React 应用程序，它查询 API、获取 JSON 项目列表并为每个项目创建单独的按钮。完成 API 调用后，我将应用程序的状态更改为 JSON 对象，这会导致 render() 方法呈现按钮列表。

axios.get('http://api_url')
.then(response => 
  this.setState(applicationJSON: response.data);
)
.catch(function (error) 
  console.log(error);
);

问题是，我无法将 onClick 附加到这些按钮。

renderItems(text) 
return (
  <div>
    
      text.map(function(name, index) 
        return <Button text=text[index].name onClick=() => handleClick() />
      )
    
  </div>
);

每当我单击其中一个按钮时，都会收到一个错误，即未定义 handleClick()。

我知道这是动态生成元素的问题，因为当我在构造函数中创建一个 Button 项并将 onClick 绑定到 handleClick 时，会调用 handleClick()。

在 React 中为动态生成的组件处理按钮点击的正确方法是什么？

【参考方案1】：

它不起作用的原因是因为当我们使用function 关键字（在text.map 中）时，函数内部的this 不会引用与封闭范围相同的this。您可以维护对封闭范围的引用，例如

renderItem(text) 
    const self = this;
        return (
            <div>
                text.map(function(name, index) 
                    return <Button text=text[index].name onClick=self.handleClick />
                )
            </div>
        );
    

或者，您可以使用一些 ES6 语言功能使整个事情变得更简洁。您的映射函数也可以简化。

class MyComponent extends React.Component 
    handleClick = (evt) => 
        // do something
    

    renderItem = (text) => 
        return (
            <div>
                text.map(item => (
                    <Button text=item.name onClick=this.handleClick />
                ))
            </div>
        );
    

这是因为 this 内部 lambda 函数（=> 函数）指的是函数的外部上下文。

【讨论】：

Hm.. 即使在构造函数中添加了该绑定语句后，我仍然收到错误“无法读取未定义的属性 'handleClick'”。

使用你答案的第二部分最终让它工作，但不完全确定它改变了什么。

我的错误，我已经编辑了我的答案并进行了一些解释