Question

我知道这个话题已被问过一千次了，但我还没有找到一个直截了当的答案，就像这样的情况（来自React Quickly）的'this'的价值：

import React from 'react'
import ReactDOM from 'react-dom'

class Content extends React.Component {
    constructor(props) {
        super(props);
        console.log(this," --> this (constructor)");
        //this.submit = this.submit.bind(this);
        this.prompt = 'Please enter your email to win $1,000,000.';
    }
    submit(event) {
        console.log(this," --> this (submit)");
        let emailAddress = this.refs.emailAddress;
        let comments = this.refs.comments;
    }
    render() {
        console.log(this," --> this");
        return (
            <div className="well">
                <p>{this.prompt}</p>
                <div className="form-group">Email: <input ref="emailAddress" className="form-control" type="text" placeholder="hi@azat.co"/></div>
                <div className="form-group">Comments: <textarea ref="comments" className="form-control"  placeholder="I like your website!"/></div>
                <div className="form-group"><a className="btn btn-primary" value="Submit" onClick={this.submit}>Submit</a></div>
            </div>
        )
}



ReactDOM.render(<Content />,document.getElementById('content'));

我觉得我理解为什么你需要在构造函数或箭头函数中使用bind。我明白了，没有注释掉this.submit = this.submit.bind（this），提交方法中的'this'是未定义的。但是，自从JS在严格模式下将其实际值替换为简单地返回'undefined'之后，我不确定'this'是什么。具体来说 - 渲染中的'this'是指全局/窗口'this'还是它引用了div DOM对象的这个......或者两者都没有？我知道这可能看起来很挑剔，但我真的很想知道 - 除了知道'this'没有引用Content类 - 究竟是'this'指的是什么。

由于

Answer 1

用于像

这样的香草javascript函数

submit(event) {
   ...
}

this的值取决于它的调用方式。

要在this中使用组件引用，您可以按照多种方式更改代码：

将提交功能设为箭头功能

submit = (event) => {
   ...
}

或改变你的称呼方式

<div className="form-group">
   <a className="btn btn-primary" value="Submit" onClick={(e) => this.submit(e)}>Submit
   </a>
</div>

或者将this显式绑定到构造函数

中的函数

constructor(props) {
   super(props);
   ...
   this.submit = this.submit.bind(this);
}

与React

1 个答案: