Question

我在学习ReactJS的早期，在使用Array.prototype.map（）方法渲染多个元素时遇到了非常令人费解（并且令人讨厌！）的问题。我在网上搜索了解决方案并查看了几本没有成功的书。这是我试图实现的代码：

var ExampleComponent = React.createClass({
  handleClick: function(event) {
    event.preventDefault();
    console.log("Click is working");
  },

  getInitialState: function() {
    return {
      exampleArray: ["one", "two", "three"]
    };
  },

  render: function() {
    return (
      <div>
        {this.state.exampleArray.map(function(item, index) {
          return (
            <button className={item} key={index} onClick={this.handleClick}>{item}</button>
          );
        })}
      </div>
    );   
  }
});

按钮渲染得很好。我希望点击其中任何一个后，控制台中都会记录指定的字符串。相反，按钮点击会导致页面重新加载......感觉就像React工作原理中我有一些显而易见的东西。

以前有人遇到过这个问题吗？这里的罪魁祸首是什么？有没有更好的方法来实现相同的模式？

对此问题的任何意见都不胜感激！

Answer 1

您需要使用父上下文调用map()：

// Call map with context.
{this.state.exampleArray.map(function(item, index) {
  return (
    <button className={item} key={index} onClick={this.handleClick}>
      {item}
    </button>
  );
}, this)}

// Call map with implicit context via arrow function.
{this.state.exampleArray.map((item, index) => {
  return (
    <button className={item} key={index} onClick={this.handleClick}>
      {item}
    </button>
  );
})}

另见Communicate Between Components。

React元素的方法在map（）函数中绑定时显示奇怪的行为

1 个答案: