Question

我有一个非常简单的React，它隐藏在数组上并输出制表符名称。但是我的点击处理程序不再有效（它在我没有循环之前有效）。

这段和我之前的.map循环之间的区别在于这个新作品在渲染函数中有两个返回。一个用于React需要的外部div元素，然后一个用于循环对象。

有没有人可以成功让点击处理程序再次运行？

请参阅我的组件

class TabMenu extends React.Component {
constructor(props) {
    super(props);
    this.state = {

    };
    this.tabMenuList = [
      {
        title: 'My Account',
        section: 'MyAccount'
      },
      {
        title: 'Conference Details',
        section: 'MyAccount'
      },
      {
        title: 'My Abstract',
        section: 'MyAbstract'
      }
    ];
}
handleClick(e){
  e.preventDefault();

  console.log('this is the click handler', this);
  ReactDOM.render(<Conference />,document.getElementById('content'));
}
render() {

  return (
    <div>
      {this.tabMenuList.map(function(menuItem, index){
        return(
          <li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>
        )
      })}
    </div>
  );
}
}

Answer 1

解决方案

使用ES6 arrow函数，如下所示：

class TabMenu extends React.Component {
constructor(props) {
    super(props);
    this.state = {

    };
    this.tabMenuList = [
      {
        title: 'My Account',
        section: 'MyAccount'
      },
      {
        title: 'Conference Details',
        section: 'MyAccount'
      },
      {
        title: 'My Abstract',
        section: 'MyAbstract'
      }
    ];
}
handleClick(e){
  e.preventDefault();

  console.log('this is the click handler', this);
  ReactDOM.render(<Conference />,document.getElementById('content'));
}
render() {

  return (
    <div>
      {this.tabMenuList.map((menuItem, index) => {
        return(
          <li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>
        )
      })}
    </div>
  );
}
}

<强>为什么吗

在您的React代码中，this未引用TabMenu。

在函数中声明this时，对于您的环境，它会自动默认为全局对象 - Window。

由于以下代码未处于严格模式，并且由于调用未设置此值，因此默认为全局对象。

然而，了解

非常重要

但是，在严格模式下，它的值保持在进入执行上下文时设置的值，因此，在下面的例子中，这将默认为undefined。

为什么呢？因为根据this问题和第一个答案，默认情况下ES6模块use strict因此this中的function等于undefined。

因此，

在箭头函数中，这是通过词法设置的，即它被设置为封闭执行上下文的值。在全局代码中，它将被设置为全局对象

您的封闭执行上下文是TabMenu。

MDN在this上有一篇很棒的文章，以及它如何根据调用this的上下文而变化。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this

Answer 2

试试这个

<li data={menuItem.section}>
            <a onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>

而不是

<li data={menuItem.section}>
            <a onClick=onClick={this.handleClick.bind(this)} href={'#'}>
              <img src={'assets/img/mail_icon.jpg'} />
              <span>{menuItem.title}</span>
            </a>
          </li>

或者你可以删除第二次返回可能会起作用

单击处理程序内部循环（两个返回）不起作用（React JS）

2 个答案: