按钮回调中的log语句显示未定义

Question

在下面发布的exmaple上，我正在尝试记录按钮的编号。但是当我点击任意按钮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>
);
}