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绑定到handleClick时，会调用handleClick（）。

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

Answer 1

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

this

或者，您可以使用一些ES6语言功能使整个过程更清晰。您的映射功能也可以简化。

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

这是有效的，因为lambda函数内的class MyComponent extends React.Component { handleClick = (evt) => { // do something } renderItem = (text) => { return ( <div> {text.map(item => ( <Button text={item.name} onClick={this.handleClick} /> ))} </div> ); } }（=＆gt;函数）是指函数的外部上下文。

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

1 个答案: