美文网首页前端
React中自定义函数什么时候执行

React中自定义函数什么时候执行

作者: 会长__ | 来源:发表于2019-07-14 16:27 被阅读0次
<div id="root"></div>

<script type="text/babel">
  class Toggle extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isToggleOn: true,
        count: 0
      };

      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
      console.log("第" + this.state.count + "次");
      this.setState(prevState => ({
        isToggleOn: !prevState.isToggleOn,
        count: this.state.count + 1
      }));
    }

    render() {
      return (
        
<div>
  点击才会执行
  <button onClick={() => this.handleClick()}>
    {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
  会自动执行
  <button onClick={this.handleClick()}>
    {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
  点击执行,可以用于传参数
  <button onClick={this.handleClick}>
    {this.state.isToggleOn ? 'ON' : 'OFF'}
  </button>
</div>
); } } ReactDOM.render( <Toggle/>, document.getElementById('root') );</script>

可以自己测试三个按钮,推荐第三种写法,既可以避免立即执行且可以传参

转载地址

https://blog.csdn.net/MoYongShi/article/details/80435401

相关文章

  • React中自定义函数什么时候执行

    可以自己测试三个按钮,推荐第三种写法,既可以避免立即执行且可以传参 转载地址 https://blog.csdn....

  • react-生命周期

    *当state 或者 props 中的内容发生改变时 render函数就会执行 react 中的生命周期函数: g...

  • 4.react生命周期

    面试题 1、React中的生命周期有哪些? 2、React中组件第一次执行的时候会执行哪些生命周期函数 3、ren...

  • React-Native(入门)

    自定义组件中使用props,在 render函数中引用this.props即可 2.state工作原理与react...

  • 9、MySQL函数

    MySQL中提供了许多内置函数,例如: 1、自定义函数 2、删除函数 3、执行函数

  • React Hooks的使用限制

    React Hooks的使用限制 只能用于函数组件或自定义Hooks中 不能写在条件语句中 不能写在函数组件或自定...

  • maya保存场景时添加事件event

    功能:当保存maya时执行自定义函数

  • React中的纯函数

    React之纯函数 纯函数 Pure Function定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中...

  • 2021-03-18

    js 解析:fn(10):当执行到自执行函数时,直接返回一个函数,自定义函数的this指的是全局window,所以...

  • react学习(17)回调形式的ref

    1:首先回调函数是指:自己定义了一个函数,并且这个函数不是自己调用且执行了,ref的回调函数是react帮忙执行。...

网友评论

    本文标题:React中自定义函数什么时候执行

    本文链接:https://www.haomeiwen.com/subject/lgfikctx.html