相关疑难解决方法(0)

如何在回调中访问正确的`this`?

我有一个构造函数,它注册一个事件处理程序:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', function () {
        alert(this.data);
    });
}

// Mock transport object
var transport = {
    on: function(event, callback) {
        setTimeout(callback, 1000);
    }
};

// called as
var obj = new MyConstructor('foo', transport);
Run Code Online (Sandbox Code Playgroud)

但是,我无法data在回调中访问已创建对象的属性.它看起来this并不是指创建的对象,而是指另一个对象.

我还尝试使用对象方法而不是匿名函数:

function MyConstructor(data, transport) {
    this.data = data;
    transport.on('data', this.alert);
}

MyConstructor.prototype.alert = function() {
    alert(this.name);
};
Run Code Online (Sandbox Code Playgroud)

但它表现出同样的问题.

如何访问正确的对象?

javascript callback this

1309
推荐指数
12
解决办法
36万
查看次数

无法在事件处理程序中访问React实例(this)

我在ES6中编写了一个简单的组件(使用BabelJS),并且函数this.setState不起作用.

典型的错误包括

无法读取未定义的属性'setState'

要么

this.setState不是函数

你知道为什么吗?这是代码:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs babeljs

201
推荐指数
4
解决办法
6万
查看次数

反应this.state未定义?

我正在关注Pluralsight的初学者教程,在表单上提交一个值传递给addUser组件方法,我需要将userName推送到this.state.users但是我得到错误

 App.jsx:14 Uncaught TypeError: Cannot read property 'users' of undefined
Run Code Online (Sandbox Code Playgroud)

零件

import React from 'react'
import User from 'user'
import Form from 'form'

class Component extends React.Component {
    constructor() {
        super()
        this.state = {
            users: null
        }
    }
    // This is triggered on form submit in different component
    addUser(userName) { 
        console.log(userName) // correctly gives String
        console.log(this.state) // this is undefined
        console.log(this.state.users) // this is the error
        // and so this code doesn't work
        /*this.setState({
            users: this.state.users.concat(userName) …
Run Code Online (Sandbox Code Playgroud)

reactjs

38
推荐指数
3
解决办法
5万
查看次数

标签 统计

javascript ×2

reactjs ×2

babeljs ×1

callback ×1

ecmascript-6 ×1

this ×1