为什么 onClick 在组件呈现时触发而不是在单击时触发？

Question

我有这个按钮 console.log 作为测试，它会在我刷新页面时触发，而不是在我单击导航按钮时触发。如果您需要更多，请告诉我您是否可以看到此代码的问题。

import React from 'react';
import SideNav from "react-sidenav";
var TeamActions = require('../actions/TeamActions');

export default class Nav extends React.Component {
  pushName(name) {
    TeamActions.setTeamName(name);
  }

  render() {
    return(
      <SideNav.Menu
        path="#"
        itemHeight="32px"
        styles={{margin: "0"}}
      >
        <SideNav.MenuItem
          itemKey="truck"
        >
        //this is where I'm using onClick
          <SideNav.ILeftItem
            className="fa fa-truck"
            onClick={console.log("hello")}
          >
              Boston Celtics
          </SideNav.ILeftItem>
        </SideNav.MenuItem>

Answer 1

那是因为您实际上是在 onClick 处理程序中调用 console.log 函数，而不是仅仅指向它的引用。 JSX 编译为纯 JS，因此 {} 括号之间的任何内容都将被评估。您只需指向您的 onClick 中的函数引用，而不是调用它。

使用 ES6 类时需要绑定到当前的 this，这有点复杂，因为它不像旧样式那样自动绑定 React.createClass语法，但这里有一个简单的例子，

class MyComponent {

  onLinkClicked () {
    console.log('Clicked!')
  }

  render () {
    return (
      <a onClick={this.onLinkClicked.bind(this)}>Click me</a>
    );
  }
}

为什么 onClick 在组件呈现时触发而不是在单击时触发？

Why is onClick triggering on render of component instead of when clicked?

reactjs

react-jsx