世界上最伟大的投资就是投资自己的教育

诱人的 React 免费视频教程 - 基础篇 #7 事件

下载源码随风 · 凡人发布于2018-01-045361 次点击

此次更改：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
};

课程目录

07:251Free诱人的 React 免费视频教程 - 基础篇 #1 介绍

04:182Free诱人的 React 免费视频教程 - 基础篇 #2 create-React-app

07:423Free诱人的 React 免费视频教程 - 基础篇 #3 第一个组件

05:094Free诱人的 React 免费视频教程 - 基础篇 #4 多个组件

02:295Free诱人的 React 免费视频教程 - 基础篇 #5 输出动态数据

11:226Free诱人的 React 免费视频教程 - 基础篇 #6 通过 Props 传递数据

07:24Free诱人的 React 免费视频教程 - 基础篇 #7 事件

03:548Free诱人的 React 免费视频教程 - 基础篇 #8 组件的 state 属性

04:329Free诱人的 React 免费视频教程 - 基础篇 #9 React 如何更新 dom

05:4310Free诱人的 React 免费视频教程 - 基础篇 #10 无状态组件

05:5111Free诱人的 React 免费视频教程 - 基础篇 #11 子组件向父组件传值

07:0512Free诱人的 React 免费视频教程 - 基础篇 #12 组件间传值

06:5713Free诱人的 React 免费视频教程 - 基础篇 #13 双向数据绑定

20:4114Free诱人的 React 免费视频教程 - 基础篇 #14 组件生命周期（完结）

学员（250）

最新动态

2021-04-24学习到了7:29

2021-04-23学习到了7:40

2021-04-16学习到了7:31

2021-04-15学习到了7:40

2021-04-09学习到了1:47

2021-03-12学习到了0:04

2021-03-09学习到了1:27

2021-03-09学习到了7:40

2021-02-18学习到了7:09

2021-02-10学习到了7:33

2021-02-03学习到了7:40

2021-01-30学习到了2:08

2021-01-19学习到了0:08

2021-01-18学习到了7:40

2021-01-11学习到了7:40

2021-01-11学习到了7:38

2020-12-29学习到了4:37

2020-12-26学习到了7:40

2020-12-16学习到了0:22

2020-12-07学习到了7:26

2020-11-22学习到了7:40

2020-11-20学习到了7:40

2020-11-03学习到了7:40

2020-10-29学习到了7:24

2020-10-29学习到了6:55

2020-10-28学习到了5:25

2020-10-25学习到了6:43

2020-10-23学习到了3:41

2020-10-19学习到了7:40

2020-10-10学习到了7:35

2020-10-04学习到了7:14

2020-09-25学习到了7:30

2020-09-23学习到了7:35

2020-09-22学习到了0:30

2020-09-20学习到了7:25

2020-09-16学习到了7:34

2020-08-31学习到了7:36

2020-08-23学习到了7:38

2020-08-22学习到了7:31

2020-08-07学习到了7:30

2020-08-04学习到了7:40

2020-07-21学习到了1:59

2020-07-16学习到了7:40

2020-07-15学习到了7:36

2020-07-15学习到了7:25

2020-07-13学习到了7:40

2020-07-04学习到了1:10

2020-07-01学习到了7:40

2020-06-29学习到了7:16

2020-06-23学习到了7:39

2020-06-17学习到了7:40

2020-06-15学习到了7:40

2020-06-09学习到了7:40

2020-06-01学习到了7:28

2020-05-27学习到了0:00

2020-05-25学习到了7:34

2020-05-24学习到了7:03

2020-05-23学习到了7:28

2020-05-17学习到了7:40

11 条回复

guxiaobai · 道祖 #1 2018-07-16

onClick = {this. onMakeOlder.bind(this)}
this.state = {age: this.props.age}
this.setState({age: this.state+3})

cl561106 · 练虚 #2 2018-09-29

就是唯一的疑惑是 creact-react-app 这么做到 className='btn btn-primary'的，而且没看到你调用 Bootstrap 啊~
随风 · 元婴 #3 2018-09-30

对 cl561106 · 练虚 #10 回复

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

就在前面有说你去翻翻呗
zhaopeng519 · 元婴 #4 2019-01-18

对 cl561106 · 练虚 #10 回复

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

在 index.html 页面引入
caifulin · 元婴 #5 2019-03-13

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 啥意思啊
随风 · 元婴 #6 2019-03-13

对 caifulin · 元婴 #10 回复

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 · 元婴 #7 2019-03-13

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

也可能是我一时缓不过来吧，以后写多了自然就能理解了
随风 · 元婴 #9 2019-03-13

对 caifulin · 元婴 #10 回复

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

你这样写只是在试，没有啥根据，你可以了解下 es6 class 相关的知识点，可能就会好一些，写多了可能就自然理解了。
caifulin · 元婴 #10 2019-03-13

其实我只是不理解什么时候该使用 this
XiaoJieRun · 元婴 #11 2019-06-06

习惯把代码逻辑注释