reactjs – 在React事件处理程序中的值

发布时间：2020-12-15 06:24:43 所属栏目：百科来源：网络整理

导读：由于某些原因，这在反应事件处理程序中的值被丢失。阅读文档我认为在这里做了一些反应，以确保这被设置为正确的价值以下不符合我的预期 import React from 'react';export default class Observer extends React.Component { handleClick() { console.log(t

由于某些原因，这在反应事件处理程序中的值被丢失。阅读文档我认为在这里做了一些反应，以确保这被设置为正确的价值

以下不符合我的预期

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs undefined
    }
    render() {
        return (
            <button onClick={this.handleClick}>Click</button>
        );
    }
}

但是这样做：

import React from 'react';

export default class Observer extends React.Component {

    handleClick() {
        console.log(this); //logs Observer class instance
    }
    render() {
        return (
            <button onClick={this.handleClick.bind(this)}>Click</button>
        );
    }
}

React和ES6对我来说是新的，但这似乎不是正确的行为？

这是JavaScript和React的正确行为，如果您使用新的类语法。

autobinding feature does not apply to ES6 classes在v0.13.0。

所以你需要使用：

<button onClick={this.handleClick.bind(this)}>Click</button>

或其他技巧之一：

export default class Observer extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    /* ... */
  }
  render() {
      return <button onClick={this.handleClick}>Click</button>
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!