如何使用this.props将值传递给onclick回调
如何使用this.props将值传递给onclick回调
提问于 2018-07-31 23:41:56
我创建了按钮数组，如下代码部分所示。我正在使用沙箱。我想要做的是，当我点击按钮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;回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-31 23:46:27
您可以创建一个新的内联函数，将索引传递给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>
Stack Overflow用户
发布于 2018-07-31 23:44:52
只需尝试动态创建一个调用onClickFunction的匿名函数
<button style={buttonStyle} onClick={() => this.onClickFunction(i)}>现在你的onClickFunction可以接受一个参数：
onClickFunction(i) {
console.log(`button ${i}`);
}Stack Overflow用户
发布于 2018-08-01 00:07:29
您可以将值作为params传递给回调函数，而不是作为props。
for (let i = 0; i < 10; i++) {
arrButtons.push(
<button style={buttonStyle} onClick={()=>this.onClickFunction(i)}>
{i}
</button>
);
}传递value onClick按钮。并接收如下函数。
onClickFunction(i) {
console.log("button ",i);
console.log('value received as params not as props like this.props.log');
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51617262
复制相关文章
相似问题
腾讯云开发者
