剧场模式
首页前端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
};
11 条回复
  • guxiaobai · 道祖
    guxiaobai · 道祖 #1
    onClick = {this. onMakeOlder.bind(this)}
    this.state = {age: this.props.age}
    this.setState({age: this.state+3})
    
  • cl561106 · 练虚
    cl561106 · 练虚 #2

    就是唯一的疑惑是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

  • XiaoJieRun · 元婴

    习惯把代码逻辑注释

加微信(qiuzhi99666)入群订阅号服务号
随机课程
React + dva + roadhog 轻松学

React + dva + roadhog 轻松学

7 个视频43 分钟中级

Pro¥ 59.00¥ 47.20

前端React已完结

学员
迅捷斥候tony · 大乘xforgchengz · 元婴穆博嘉 · 真仙yangxue1985 · 元婴owenyikong · 道祖星星De微光 · 金仙一片天空 · 元婴Asia Li · 大乘骑龙 · 太乙徐少侠 · 元婴jiuli-gcy · 道祖阿震 · 真仙昀 · 元婴韩标 · 元婴sailorook · 金仙lilu1814 · 元婴graywolf · 元婴Emperor · 元婴River- · 大乘L · 元婴LeoTang · 元婴金丹期,大成 · 真仙小平头 · 元婴cc20140820 · 真仙蒋海 · 元婴阿白 · 真仙ldc · 真仙比特 · 元婴kuckboy1994 · 太乙云 · 太乙kasni · 元婴陈召旭 · 元婴自然萌 · 元婴frank · 真仙YanXinhua · 道祖liulei-jishu · 合体小小小小🐏 · 元婴张文静 · 合体zbx7858 · 道祖zzqswo · 合体wjfc · 太乙🐳陈昱含🌟 · 元婴329413447 · 元婴Sine · 合体lin5164 · 元婴hahah · 合体兀 · 合体李卓 · 元婴ownryan · 道祖     · 合体syy · 元婴星空瀚海 · 化神CalvinSraub · 元婴山形瓦力 · 元婴MeteorLx · 元婴靓狼仔 · 真仙那人 · 元婴Actor · 大罗Blue米 · 大乘招财加菲猫 · 金仙amyliyin · 元婴mfkyddh · 金仙kaixuan1992 · 道祖iverhao · 真仙daniel_mea · 元婴LeoDo · 太乙娜娜 · 太乙jiaoxiaomei · 元婴LiOH · 元婴Hunter · 元婴jeanim · 合体diangong · 元婴$ZHANG 🔓จุ๊บ · 元婴Matthew · 道祖CunFlower · 合体ChenCMP · 元婴程 · 合体Max · 合体usagithub · 元婴yhuyo · 道祖赵占涛 · 元婴liar · 真仙左左 洁 · 元婴何芳临 · 元婴冀宇航 · 真仙海市蜃楼丶 · 元婴swip · 合体lwp007 · 元婴guxiaobai · 道祖chloris · 太乙JSjump · 大罗miaozilong · 合体XiaoJieRun · 元婴xiaoming · 元婴思进 · 大乘YJwsl · 练虚疯癫 · 金仙背包客 · 合体fmheart · 真仙wasd6631456 · 大乘ttyring · 元婴gitwisdom · 元婴me · 元婴caspertu · 真仙chenjimin132 · 合体suntong233 · 元婴开心就好 · 合体linmiaomiao123 · 元婴咬指头的猫 · 元婴Qujoe · 合体libin · 大乘FastTurbo · 道祖super · 大乘ttswh2009 · 太乙ScOrPiOzzy · 元婴mlb · 元婴woshimaxiaorui · 真仙bobcyd212 · 道祖shishihou · 道祖hyt9796 · 大乘itlaowang520 · 金仙duzhihao · 合体QiangMicro · 元婴*puff~ · 元婴jixiyu · 元婴ldn · 元婴Smile · 元婴00Jane · 合体shaoqiming1028 · 元婴gdchent · 元婴兴海 · 元婴zhuangwang · 元婴子非鱼 · 真仙zwkjhx · 元婴Kelly · 元婴huxiaohui · 元婴qq540618173 · 元婴liunian1993 · 合体KingTak-Lam · 元婴LINHANXIN · 元婴lbb · 合体shmily1996 · 合体h23 · 太乙huangsiyuan2019 · 元婴linhaijian · 元婴Messi-Q · 元婴Godvmiku · 元婴samuelshang · 太乙QQ741404277 · 练虚dannyking630 · 真仙
最新动态
迅捷斥候tony · 大乘学习到了7:40
xforgchengz · 元婴学习到了7:28
穆博嘉 · 真仙学习到了7:40
yangxue1985 · 元婴学习到了7:40
owenyikong · 道祖学习到了7:40
统计信息
    学员: 14751
    视频数量: 852
    帖子数量: 421

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

Top