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的匿名函数：

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

现在您的onClickFunction可以接受参数了：

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

Answer 2

您可以创建一个新的内联函数，将索引传递给您的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 3

您可以将值作为参数传递给回调函数，而不是作为道具。

<div class="grid">
  <nav class="nav"></nav>
  <div class="logo"></div>
  <div class="overlap">
    <h3>Overlap!</h3>
  </div>
  <section class="main"></section>
  <aside class="side"></aside>
  <footer class="footer"></footer>
</div>

通过值for (let i = 0; i < 10; i++) { arrButtons.push( <button style={buttonStyle} onClick={()=>this.onClickFunction(i)}> {i} </button> ); }按钮。并接收如下功能。

onClick

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

3 个答案: