万码学堂2025年课程全面升级

新增AI编程课程，引领技术教育新趋势

规避 React 组件中的 bind(this)

2018-09-18 16:33
万码学堂

 

React 组件中处理 onClick 类似事件绑定的时候，是需要显式给处理器绑定上下文（context）的，这一度使代码变得冗余和难看。

请看如下的示例：

class App extends Component {  constructor() {    super();    this.state = {      isChecked: false    };  }  render() {    return (      <div className="App">        <label >          check me:          <input            type="checkbox"            checked={this.state.isChecked}            onChange={this.toggleCheck}          />        </label>      </div>    );  }  toggleCheck() {    this.setState(currentState => {      return {        isChecked: !currentState.isChecked      };    });  }}

页面上放了一个 checkbox 元素，点击之后切换其选中状态。这是很直观的一段代码，但并不会像你想的那样正常工作。

事件处理器上下文丢失的报错
事件处理器上下文丢失的报错

因为 checkbox 的 onChange 事件处理器中，找不到 React 组件的 setState 方法，这说明其执行时的上下文不是该组件，而是别的什么东西，具体我们来调试下。

调试查看丢失上下文后 this 的值
调试查看丢失上下文后 this 的值

出乎意料，是 undefined，这个方法在一个完全野生的环境下执行，没有任何上下文。

WHY

当然这并不是 React 的锅，这是 JavaScript 中 this 的工作原理。具体可参见 Chapter 2: this All Makes Sense Now! 来追溯其底层原因，简单来讲 

关键字：

青岛软件培训

可能你正在寻找一家靠谱的IT培训机构， 渴望突破职业瓶颈， 找一份得体的工作。 恰巧万码学堂正在寻找像你这样不甘平凡的追光者！ 我们拒绝纸上谈兵，直接参与真实开发流程！
现在行动，未来可期‌
立即拨打0532-85025005，预约免费职业规划咨询 前20名咨询者赠送《2025高薪技术岗位白皮书》!
你不是在报名课程，而是在投资五年后的自己！

申请免费试听课程
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信