React.js onclickイベント：未定義のプロパティ 'props'を読み取ることができません

Question

私は反応フレームワークの初心者ですから、私の質問はあなたの多くにとって基本的に見えるかもしれません。しかし、私はこの部分に立ち往生していると私を信じてください。 私は、ボタンのクリックでテキストボックスの値を取得し、その値を他の関数に小道具として送信しようとしています。 私はtextboxフィールドの値を抽出できますが、clickイベントでは、 'プロパティを読み取れません'というプロンプト 'undefined'が表示されます。ここで

は重要なポイントである： - ）

1. termchange（テキスト入力値を抽出するために使用されます。
2. handleclickは、テキストボックス値onclickイベントの抽出に使用されます。
3. oncitychangeは、テキストボックス （oncitychange（）関数は別のコンポーネントの内部にあります）の値を送信した関数です。

ありがとうございます。ここ

は私のコードです： -

import React,{ Component } from 'react'; 
import ReactDom from 'react-dom'; 
class SearchBar extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     cityname:'' 
    } 
    } 

    render(){ 
    return(
     <div> 
     <span>Enter the city: </span> 
     <input type="text" id="txtbox" value={this.state.cityname} 
      onChange={event=>this.termchange(event.target.value)} /> 
     <input type="submit" onClick={this.handleclick} /> 
     </div> 
    ); 
    } 

    termchange(cityname){ 
    this.setState({cityname}); 
    } 

    handleclick(){ 
    this.props.oncitychange(cityname); 
    } 
} 

export default SearchBar; 

Answer 1

でthis.handleClick = this.handleClick.bind(this)を追加します。あなたの機能は何がthisか分からない。コンストラクタにthisをバインドすることも、環境に応じて他のオプションを簡単にすることもできます。

は、修正するために、あなたのコンストラクタにこれを追加します。

this.termchange = this.termchange.bind(this); this.handleclick = this.handleclick.bind(this);

それとも何が起こっているのより詳細な説明についてはhttps://blog.andrewray.me/react-es6-autobinding-and-createclass/をお読みください。

私は個人的にES7太鼓のクラスのメソッドを使いますが、私はほとんどの開発者がその方向に動いていると思います。

Answer 2

は、それはすべての範囲についてですコンストラクタ

Answer 3

だけでonClick={this.handleClick}を置き換える：

onClick={this.handleClick.bind(this)} 

その方法を技術的には必須ではありませんが、関数スコープはただ、一般的にrenderメソッドが定義された最後のメソッドである必要があり、リアクトオブジェクト