ユーザーが「送信」ボタンをクリックすると、これらの入力フィールドを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;
}
ビットが欠落しています。レンダー機能はどこですか? – x0n
私はそれをシンプルにしていますが、このリターンjsx要素メソッドは実際にレンダリング関数に属しています – TyForHelpDude
不完全よりも完全に完了しました:) – x0n