Question

谢谢大家，结果证明这是我对ES6课程语法的困惑。

但我问了这个问题，因为我遇到了以下问题。

我正在学习React，我有以下代码片段。

import React, { Component } from 'react';

class SearchBar extends Component {
constructor(props){
    super(props);
}

render() {
    // console.log(this);
    return <div>
            <input
                onChange={ this.onInputChange }
            />
        </div>;
    }

    onInputChange(event) {
        console.log(this);
    }
}

export default SearchBar;

相当简单，此代码将生成一个输入组件，当其中的内容发生变化时，我们会注销“this”。

但是，此代码将始终生成“未定义”。

我知道对象子函数中的'this'应指向对象本身，为什么会发生这种情况？

顺便说一句，主js文件看起来像这样。

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

import SearchBar from './components/search_bar';

const API_KEY = 'AIzaSyCdAXs0YXxqGUKjb4sZsmsF_hHq_f3PJmY';

const App = () => {
    return (
            <div>
            <SearchBar />
            </div>
            );
}

ReactDOM.render(<App />, document.querySelector('.container'));

html看起来像这样

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

其中bundle.js是带bable的输出反应脚本。

函数内部的“this”不应指向对象本身吗？

0 个答案: