zoukankan      html  css  js  c++  java
  • react 中文文档案例三 (开关按钮)

    开关按钮制作
     
    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isToggleOn: true};
      
          // 这个绑定是必要的,使`this`在回调中起作用
          this.handleClick = this.handleClick.bind(this);
        }
      
        handleClick() {
          this.setState(state => ({
            isToggleOn: !state.isToggleOn
          }));
        }
      
        render() {
          return (
            <button onClick={this.handleClick}>
              {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
          );
        }
      }
      
      ReactDOM.render(
        <Toggle />,
        document.getElementById('root')
      );
    

      

    注:

    // 这个绑定是必要的,使`this`在回调中起作用

    this.handleClick = this.handleClick.bind(this);
    onClick={this.handleClick}
     
    或者:
    onClick={(e) => this.handleClick(e)}

    这个语法的问题是,每次 LoggingButton 渲染时都创建一个不同的回调。在多数情况下,没什么问题。然而,如果这个回调被作为 prop(属性) 传递给下级组件,这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定,以避免这类性能问题。

     

     
  • 相关阅读:
    Palindrome
    Girls' research
    最长回文
    Water Tree
    Alternating Current
    Psychos in a Line
    Feel Good
    Color the Fence
    javaScript内置类Date,Math等
    DOM之兄弟节点
  • 原文地址:https://www.cnblogs.com/Lolita-web/p/10342137.html
Copyright © 2011-2022 走看看