0
ありがとう、これは私のES6クラスの文法に関する混乱であることが判明しました。オブジェクト内のポイントを 'this'にする必要はありませんか？
しかし、私は次の問題に遭遇したのでこの質問をしました。
私は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がbundle.jsがbableでスクリプトを出力反応している。この
<!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>
のように見えます。
プロトタイプの継承を使用しているため – Hosar
関数内の 'this'の値は、その関数がどのように呼び出されたかによって異なります。あまり単純化された用語では、 'tester.hello（）'のような "ドット"表記を使って関数を呼び出すと、関数 'this'は' .'の左側のオブジェクトに設定されます。テスターです。これは複製ですが、私は[this'のMDNページ]（https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this）が他の質問よりも優れていると思います回答。 – nnnnnn