reactjs - this.handleClick 与 this.handleClick()

标签 reactjs

<分区>

我有两个例子。在第一个示例中,我在 JSX 中使用了 this.handleClick() 但它不起作用。但是,在第二个示例中,我在 JSX 中使用了 this.handleClick 并且它有效。我想,我缺少一些基础知识。

class MyComponent extends React.Component{
    constructor(props) {
    super(props);

this.state = {counter: 0};
this.handleClick = this.handleClick.bind(this);
} 

handleClick() {
this.setState({counter: this.state.counter + this.props.increment});
}


render() {
return(
  <div>
    <p> Current counter is {this.state.counter} </p>
    <button onClick={this.handleClick()} > Click here </button>
  </div>
  );
  }
  }


  function App() {
  return (
  <div>
      <MyComponent increment={5} />
  </div>
 );
 } 

最佳答案

this.handleClick() 这将调用该方法并返回它的返回值,而 this.handleClick 它只是方法引用

在你的代码中

<button onClick={this.handleClick()} > Click here </button>

您使 onClick 等于 this.handleClick() 返回的内容,而这什么都没有

<button onClick={this.handleClick} > Click here </button>

将使onClick引用this.handleClick方法


检查这个例子

function foo(){
    return 5;
}

console.log(foo());
console.log(foo);

记录 foo() 将等于 5 但记录 foo 将等于它自己运行

关于reactjs - this.handleClick 与 this.handleClick(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48515407/

相关文章:

javascript - 根据来自 e.target 的值 react 更新状态

javascript - React 最终形式 - 无限提交

reactjs - 如何访问 LoadableComponent 和 Route 中的子组件?

javascript - 如何计算圈复杂度?

javascript - 默认情况下,Vue 是否为 XSS 提供安全性或防止 XSS?

javascript - 如何使用 Immutable.js 提供 Flux 存储之间的依赖关系?

javascript - 为什么当子项与 React.Children.toArray 一起使用时键会改变?

reactjs - 如何将 Pikaday 与 ReactJS 结合使用?

javascript - 如何接受 webpack 的 api 访问?

reactjs - 将 create-react-app 部署到 Plesk Onyx