Question

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>
    )
  }
});

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

我只想在点击按钮时调用方法，没有什么真正复杂的。

为什么？

Answer 1

您似乎尝试使用addEmailButton作为customerId的闭包，但它没有帮助，因为它是需要{{1}的处理程序}参数，而不是按钮的渲染。

您需要的是customerId点击事件bind参数：

customerId

或者，使用ES6，您可以使用箭头功能代替var CustomerTable = React.createClass({ handleClick: function(customerId, event) { console.log("clicked", customerId); }, render: function() { var self = this; return ( <...> { this.state.customers.map(function(customer, i) { return ( <tr key={i}> <td> <button onClick={self.handleClick.bind(self, customer['id'])}>X</button> </td> </tr> ) }) } <...> ) } });和self：

bind

Answer 2

您应该转到onClick参考功能

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

或者如果您不使用ES2015箭头功能

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

在您的示例中，您要转到onClick undefined，因为console.log()会返回undefined，但不会引用{} JSX上下文意味着你可以传递给你想要执行的JS代码。

Example

React渲染组件会触发onClick事件吗？

2 个答案: