剧场模式
首页前端React诱人的 react 视频教程-基础篇

诱人的 react 视频教程 - 基础篇 #7 事件

海外散仙厉飞雨 · 真仙发布于

此次更改:https://github.com/hfpp2012/hello-react/commit/f468f017eef2323b6ba858087f124b2c83432305

src/components/Home.js

import React, { Component } from 'react';

import PropTypes from 'prop-types';

export default class Home extends Component {
  constructor(props) {
    super(props);
    this.age = this.props.age;
  }

  onMakeOlder() {
    this.age += 3;
    console.log(this);
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-xs-1 col-xs-offset-11">
            <div>your name is {this.props.name}, your age is {this.props.age}</div>
            <button onClick={() => {this.onMakeOlder()}} className="btn btn-primary">Make me older</button>
          </div>
        </div>
      </div>
    );
  }
}

Home.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  user: PropTypes.object,
  children: PropTypes.element.isRequired
};
10 条回复
  • guxiaobai · 道祖
    guxiaobai · 道祖 #1
    onClick = {this. onMakeOlder.bind(this)}
    this.state = {age: this.props.age}
    this.setState({age: this.state+3})
    
  • cl561106 · 金仙中期

    就是唯一的疑惑是creact-react-app这么做到className='btn btn-primary'的,而且没看到你调用Bootstrap啊~

  • 海外散仙厉飞雨 · 真仙

    就在前面有说 你去翻翻呗

  • zhaopeng519 · 真仙
    zhaopeng519 · 真仙 #4

    在index.html页面引入

  • caifulin · 真仙
    caifulin · 真仙 #5

    constructor(props) {
    super(props);
    this.age = this.props.age;
    }
    这一段不是很明白既然this.props.age是从父节点传过来的参数那么this.age是什么是给当前class声明一个变量么,既然是继承了父节点那么这个super是指app.js么还是react的类共有的父类,为什么不从super.props.age这样直接取父节点的值,我是做java的对this可能不像前端那么敏感,我觉得this就是值当前这个类,谁能给我科普一下这个this,我用const age = this,props.age;数据的结果是NaN啥意思啊

  • 海外散仙厉飞雨 · 真仙

    super 是调用 父类的构造函数,是个方法,不能用 super.props.age 这样 this.age 是 给当前实例添加一个属性 age ,不像 java,可能比较松散灵活一些, NaN 是报错信息,表示不是 一个 number

  • caifulin · 真仙
    caifulin · 真仙 #7

    super()是调用父类的构造函数这个java也是这样写的。这和this有点不是很明白,this.age是给当前实例添加一个属性这类似java的面向对向么,这个实例值得是谁Home这个class么,我试着这么写
    const age = 0;
    constructor(props) {
    super(props);
    age = this.props.age;
    }
    我是想申明一个Home的全局变量但是语法检测不通过,react不能再class中的函数外申明变量么

  • caifulin · 真仙
    caifulin · 真仙 #8

    也可能是我一时缓不过来吧,以后写多了自然就能理解了

  • 海外散仙厉飞雨 · 真仙

    你这样写只是在试,没有啥根据,你可以了解下 es6 class 相关的知识点,可能就会好一些,写多了可能就自然理解了。

  • caifulin · 真仙
    caifulin · 真仙 #10

    其实我只是不理解什么时候该使用this

学员
ttyring · 真仙gitwisdom · 真仙me · 真仙caspertu · 金仙后期chenjimin132 · 金仙初期suntong233 · 真仙开心就好 · 金仙后期linmiaomiao123 · 真仙咬指头的猫 · 真仙Qujoe · 真仙libin · 金仙巅峰FastTurbo · 大罗super · 金仙巅峰ttswh2009 · 太乙巅峰ScOrPiOzzy · 真仙mlb · 真仙guxiaobai · 道祖woshimaxiaorui · 太乙玉仙bobcyd212 · 道祖shishihou · 太乙巅峰hyt9796 · 金仙巅峰itlaowang520 · 太乙巅峰duzhihao · 金仙后期QiangMicro · 真仙*puff~ · 真仙jixiyu · 真仙ldn · 真仙Smile · 真仙00Jane · 金仙后期shaoqiming1028 · 真仙gdchent · 真仙兴海 · 真仙zhuangwang · 真仙子非鱼 · 太乙玉仙zwkjhx · 真仙Kelly · 真仙huxiaohui · 真仙qq540618173 · 真仙YJwsl · 金仙中期liunian1993 · 金仙后期KingTak-Lam · 真仙LINHANXIN · 真仙lbb · 金仙后期shmily1996 · 金仙后期h23 · 大罗huangsiyuan2019 · 真仙linhaijian · 真仙Messi-Q · 真仙Godvmiku · 真仙graywolf · 真仙samuelshang · 大罗QQ741404277 · 金仙中期dannyking630 · 太乙玉仙
最新动态
ttyring · 真仙学习到了7:40
gitwisdom · 真仙学习到了7:40
me · 真仙学习到了6:31
caspertu · 金仙后期学习到了7:22
chenjimin132 · 金仙初期学习到了7:36

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:31

Top