javascript - 按钮回调中的日志语句显示未定义

Question

在下面发布的示例中，我正在尝试记录按钮的编号。但是当我点击任何按钮时，e.target.i 显示未定义？？!!我正在使用沙箱

请告诉我如何解决此问题。

代码:

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";

class ButtonClicks extends React.Component {
  constructor(props) {
    super(props);
    this.onClickFunction = this.onClickFunction.bind(this);
  }

  onClickFunction(e) {
    console.log("button# " + e.target.id);
  }

  render() {
    var arrButtons = [];
    var buttonStyle = {
      margin: "10px 10px 10px 0"
    };
    for (let i = 0; i < 20; i++) {
      //Moved your loop outside render()'s return
      arrButtons.push(
        <button
          id={i}
          style={buttonStyle}
          onClick={() => this.onClickFunction()}
        >
          {i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<ButtonClicks />, rootElement);
export default ButtonClicks;

Answer 1

当您使用箭头函数语法时，调用函数时传递给函数的参数需要像这样显式传递

arrButtons.push(
    <button
      id={i}
      style={buttonStyle}
      onClick={(e) => this.onClickFunction(e)}
    >
      {i}
    </button>
  ); 

但是，更好的方法是在渲染之外使用箭头函数，但是由于您已经在构造函数中执行了此操作，因此您甚至不需要使用箭头函数语法。

onClickFunction = (e) => {
    console.log("button# " + e.target.id);
  }

  render() {
    var arrButtons = [];
    var buttonStyle = {
      margin: "10px 10px 10px 0"
    };
    for (let i = 0; i < 20; i++) {
      //Moved your loop outside render()'s return
      arrButtons.push(
        <button
          id={i}
          style={buttonStyle}
          onClick={this.onClickFunction}
        >
          {i}
        </button>
      );
    }
    return (
      <div>
        {arrButtons} {/*Very important to wrap the buttons inside a div*/}
      </div>
    );
  }