Javascript React呈现组件会触发onClick事件吗？ var CustomerTable=React.createClass（{ addEmailButton:函数（customerId）{ console.log（customerId）； 返回( X ) }, render:function（）{ var self=这个； 返回( 行动 { this.state.customers.map（函数（customer，i）{ 返回( {self.addEmailButton（客户['id']）} ) }) } ) } });

呈现此组件时，将执行console.log调用，而不单击任何按钮

我只想在单击按钮时调用一个方法，没有什么复杂的事情

---

为什么会这样？

您应该将函数的引用传递到

onClick

reference

var CustomerTable = React.createClass({    
  addEmailButton: function(customerId) {
    console.log(customerId);
    return (
      <button onClick={console.log("clicked", customerId)}>X</button>
    )
  },

  render: function() {
    var self = this;
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {
              this.state.customers.map(function(customer, i) {
                return (
                  <tr key={i}>
                    <td>{self.addEmailButton(customer['id'])}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    )
  }
});

在您的示例中，您将传递到

onClick

undefined

，因为

console.log（）

返回

undefined

，但不引用函数。

JSX

上下文中的

{}

意味着您可以将要执行的JS代码传递给它

---

您应该在单击函数的引用时转到

onClick

var CustomerTable = React.createClass({    
  addEmailButton: function(customerId) {
    console.log(customerId);
    return (
      <button onClick={console.log("clicked", customerId)}>X</button>
    )
  },

  render: function() {
    var self = this;
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {
              this.state.customers.map(function(customer, i) {
                return (
                  <tr key={i}>
                    <td>{self.addEmailButton(customer['id'])}</td>
                  </tr>
                )
              })
            }
          </tbody>
        </table>
      </div>
    )
  }
});

在您的示例中，您将传递到
onClick
undefined
，因为
console.log（）
返回
undefined
，但不引用函数。
JSX
上下文中的
{}
意味着您可以将要执行的JS代码传递给它

看起来您正试图使用
addEmailButton
作为
customerId
的闭包，但它没有帮助，因为需要
customerId
参数的是处理程序，而不是按钮的呈现

您只需使用
customerId
参数绑定
click事件：

<button onClick={function () { console.log("clicked", customerId) } }>X</button>

看起来您正试图使用
addEmailButton
作为
customerId
的闭包，但这没有帮助，因为需要
customerId
参数的是处理程序，而不是按钮的呈现

您只需使用
customerId
参数绑定
click事件：

<button onClick={function () { console.log("clicked", customerId) } }>X</button>

您不需要使用
self
，您可以在第二个参数
this.state.customers.map（function（）{}，this）
中为
设置
this
，也可以使用
bind
，但OP使用的是
self
；我的主要观点是用
customerId
（必须用
bind
或arrow函数绑定）绑定点击处理程序。你不需要使用
self
，你可以在第二个参数
this.state.customers.map（function（）{}，this）
中设置
this
.map
，或者您可以使用
bind
，但OP使用的是
self
；我的主要观点是用
customerId
（必须使用
bind
或arrow函数）绑定点击处理程序。@Sergio-Tapia你能给出反馈吗？@Sergio-Tapia你能给出反馈吗？
{
  this.state.customers.map((customer, i) => {
    return (
      <tr key={i}>
        <td>
          <button onClick={(e) => this.handleClick(customer['id'])}>X</button>
        </td>
      </tr>
    )
  })
}