react简单双向数据绑定

react简单双向数据绑定的一个小demo

react简单双向数据绑定
import React from 'react';
import './index.less';

/**
 * 测试用
 */
class Hello extends React.PureComponent {

  state = {
    uname: 'cyy',
    age: 50,
  };

  handleAdd = (e) => {
    let age = this.state.age + 1;
    this.setState({ age: age });
  };
  handleMin = (e) => {
    let age = this.state.age - 1;
    this.setState({ age: age });
  };

  render() {
    return (
      <div className="app-container">
        <h1>
          hello~{this.state.uname}, age: {this.state.age}
        </h1>
        <button onClick={this.handleAdd}>+1</button>
        <button onClick={this.handleMin}>-1</button>
      </div>
    );
  }

}

export default Hello;

类似文章

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注