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

Question

我正在编写一个简单的 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 绑定(bind)到 handleClick 时，会调用 handleClick()。

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

Answer 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>
        );
    }
}

这是有效的，因为 lambda 函数(=> 函数)中的 this 引用函数的外部上下文。