剧场模式
首页前端React 进阶提高 - 技巧篇 - 第 1 季

React 进阶提高 #19 探索 bind (this) 的写法

下载hfpp2012发布于React1589 次点击播放时长:03:50
1

https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

https://github.com/andreypopp/autobind-decorator

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: ''
    }

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = e => {
    this.setState({
      name: e.target.value
    })
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p>{ this.state.name }</p>
        <input type="text" onChange={ this.handleChange } />
      </div>
    );
  }
}

export default App;
1 条回复
  • issue #1

    第一个链接很赞哦,说出了目前的bind方式.

支付宝付款
微信扫码打赏

加我微信:15014006126

加 QQ 群:697272886(1 群)

加 QQ 群:856141852(2 群)

播放列表目录

1Freereact 技巧 #1 如何用 netlify 云服务部署 react 应用

2Freereact 技巧 #2 把 react 应用部署到 GitHub Pages

3Freereact 技巧 #3 react-router 教程 part 1

4Freereact 技巧 #4 react-router 教程 part 2

5ProReact 进阶提高 #5 无状态组件的最佳写法

6ProReact 进阶提高 #6 Fragment

7FreeReact 进阶提高 #7 context(上下文)

8ProReact 进阶提高 #8 高阶组件

9ProReact 进阶提高 #9 强大酷炫好玩的 web IDE 工具(鼠标点击生成代码,缩减 N 倍开发时间)

10FreeReact 进阶提高 #10 用高阶组件来重构代码

11ProReact 进阶提高 #11 我最爱的 React 库 - 功能强大的可插入组件 (简化代码)

12ProReact 进阶提高 #12 返回多个组件的正确方式

13FreeReact 进阶提高 #13 netlifyctl 一键部署前端应用

14FreeReact 进阶提高 #14 defaultProps 和 类型检查 PropTypes part 1

15ProReact 进阶提高 #15 类型检查 PropTypes part 2

16ProReact 进阶提高 #16 用 Render Props 代替 HOC(高阶组件)

17ProReact 进阶提高 #17 错误边界和生命周期函数 componentDidCatch

18FreeReact 进阶提高 #18 升级到 16.3

FreeReact 进阶提高 #19 探索 bind (this) 的写法

20FreeReact 进阶提高 #20 React 16.3 全新的 Context API

21ProReact 进阶提高 #21 React 16.3 全新的 Context API - 实践

22ProReact 进阶提高 #22 从 Redux 迁移到 React 16.3 的 Context API 之实践

23ProReact 进阶提高 #23 对象,数组,可变数据

24ProReact 进阶提高 #24 React.Children API 和 props.children 讲解

25ProReact 进阶提高 #25 如何使用 styled-components

26ProReact 进阶提高 #26 如何使用 styled-components(实践篇)

27ProReact 进阶提高 #27 你应该使用 redux-form(介绍)

28ProReact 进阶提高 #28 你应该使用 redux-form(实践篇)

29ProReact 进阶提高 #29 React Portals(学习方法)

30ProReact 进阶提高 #30 使用 React Portals 实现 Modal 框(part 1)

31ProReact 进阶提高 #31 使用 React Portals 实现 Modal 框(part 2)

32ProReact 进阶提高 #32 使用 React Portals 实现 Modal 框(part 3)

33ProReact 进阶提高 #33 使用 React Portals 实现 Modal 框(part 4)

相似的视频
React 进阶提高 #5 无状态组件的最佳写法

React 进阶提高 #5 无状态组件的最佳写法

Pro播放时长:04:52

2808 次点击

React 进阶提高 #21 React 16.3 全新的 Context API - 实践

React 进阶提高 #21 React 16.3 全新的 Context API - 实践

Pro播放时长:09:19

1569 次点击

React 进阶提高 #29 React Portals(学习方法)

React 进阶提高 #29 React Portals(学习方法)

Pro播放时长:08:52

14376 次点击

React 进阶提高 #27 你应该使用 redux-form(介绍)

React 进阶提高 #27 你应该使用 redux-form(介绍)

Pro播放时长:06:40

7933 次点击

React 进阶提高 #12 返回多个组件的正确方式

React 进阶提高 #12 返回多个组件的正确方式

Pro播放时长:03:07

1449 次点击

© Rails365 | 隐私条款 | 服务条款 | 粤ICP备15004902号 | 在线学员:14

Top