2017-01-28 21 views
1

ユーザーが「送信」ボタンをクリックすると、これらの入力フィールドをMessageインターフェイスのインスタンスにバインドする必要があります。これを行うには、クラス
のMessageオブジェクトを作成し、フォームの値(keepNameUpdated())。私はそれがReactコンポーネントのイベントハンドラで「未定義」

Uncaught TypeError: Cannot read property 'message' of undefined

をスロー何かを入力すると

ので、「これは」定義されていないと言うが、なぜ?ここ

は私のコードです:

 export class IMessage { 
      Name: string; 
      Surname: string; 
     } 



    export default class Contact extends React.Component<IContactProperties, IWebPartState> { 
     message : IMessage; 
     constructor(props: IContactProperties, state: IWebPartState) { 
      super(props); 
      this.message = new IMessage(); 
     } 
public render(): JSX.Element { 
      return (
       <div className="row"> 
        <div className="form-group col-md-6"> 
         <label >Name</label> 
         <input type="text" className="form-control" onChange={this.keepNameUpdated} id="name" placeholder="Adiniz" /> 
         </div> 
         <div className="form-group col-md-6"> 
         <label >Surname</label> 
         <input type="text" className="form-control" id="surname" placeholder="Soyadiniz" /> 
         </div> 
         <div className="form-group col-md-12"> 
         <button type="button" className="btn btn-success" onClick={this.clickSubmit}><i className="fa fa-save"></i> Submit</button> 
         </div> 
        </div> 
       ); 
    } 

     private keepNameUpdated(e) { 
      this.message.Name=e.target.value; 
      } 
      private keepSurnameUpdated(e) { 
      this.message.Surname=e.target.value; 
      } 

この参照が定義されていませんなぜですか? enter image description here

+0

ビットが欠落しています。レンダー機能はどこですか? – x0n

+0

私はそれをシンプルにしていますが、このリターンjsx要素メソッドは実際にレンダリング関数に属しています – TyForHelpDude

+0

不完全よりも完全に完了しました:) – x0n

答えて

1

IIRCの場合、thisという概念がReactコンポーネントのインスタンスを参照するようにハンドラ関数をバインドする必要があります。だから、あなたのコンストラクタでは、これらの行を追加します。

this.keepNameUpdated = this.keepNameUpdated.bind(this); this.keepSurnameUpdated = this.keepSurnameUpdated.bind(this);

出典:コードのhttps://facebook.github.io/react/

+0

はい、それは明示的に指定しなければなりません。 100の財産があればどうなりますか? – TyForHelpDude

+1

これは、javascript DOMとブラウザDOMでイベントハンドラが機能する単なる方法です。私は知らないあなたを助けるために十分に反応しますが、おそらくあなたのために仕事をするフレームワークにいくつかのヘルパー機能があります。 – x0n

関連する問題