如何使用this.ops将值传递给onclick回调

Question

我创建了按钮数组，如下代码部分所示。我正在使用沙盒。我想做的是，当我点击按钮3时，我应该在控制台中收到

button 3

等等

请告诉我应该如何将值传递给onClick回调

代码：

import React from "react";
import ReactDOM from "react-dom";
import createReactClass from "create-react-class";
var arrButtons = [];
var buttonStyle = {
margin: "10px 10px 10px 0"
};
class ButtonClicks extends React.Component {
constructor(props) {
super(props);
this.onClickFunction = this.onClickFunction.bind(this);
}
onClickFunction() {
console.log("button ");
console.log(this.props.log);
}
render() {
for (let i = 0; i < 10; i++) {
//Moved your loop outside render()'s return
arrButtons.push(
<button style={buttonStyle} onClick={this.onClickFunction}>
{i}
{this.props.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

您可以创建一个新的内联函数，将索引传递给onClickFunction。

示例

const buttonStyle = {
margin: "10px 10px 10px 0"
};
class ButtonClicks extends React.Component {
constructor(props) {
super(props);
this.onClickFunction = this.onClickFunction.bind(this);
}
onClickFunction(index) {
console.log(`button ${index}`);
}
render() {
const arrButtons = [];

for (let i = 0; i < 10; i++) {
arrButtons.push(
<button style={buttonStyle} onClick={() => this.onClickFunction(i)}>
{i}
{this.props.i}
</button>
);
}

return (
<div>
{arrButtons}
</div>
);
}
}
ReactDOM.render(<ButtonClicks />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 2

只需尝试动态创建一个调用onClickFunction:的匿名函数

<button style={buttonStyle} onClick={() => this.onClickFunction(i)}>

现在你的onClickFunction可以接受一个论点：

onClickFunction(i) {
console.log(`button ${i}`);
}

Answer 3

您可以将值作为params传递给回调函数，而不是作为props。

for (let i = 0; i < 10; i++) {
arrButtons.push(
<button style={buttonStyle} onClick={()=>this.onClickFunction(i)}>
{i}
</button>
);
}

传递值onClick按钮。并在如下功能中接收。

onClickFunction(i) {
console.log("button ",i);
console.log('value received as params not as props like this.props.log');
}