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(属性) 传递给下级组件，这些组件可能需要额外的重复渲染。我们通常建议在构造函数中进行绑定，以避免这类性能问题。