Reactでテキストボックス入力値を取得する

Visual StudioでASP.NET Coreを使ってWebサーバを開発する。クライアントはReact.jsで実装する。
両者間でデータを受け渡しするために、Webページのテキストボックスに入力された値を取得したい。

環境

Visual Studio Community 2017 ver 15.7.1
.NET Framework ver 4.7.03056
npm ver 5.6.0

イベント処理の追加

tsxファイルにボタンを設置し、onClickでメソッドを指定する。

DoSomething.tsx

public render() {
    return <div>
    <input type="submit" value="確定" onClick={() => this.doSomething()} />
    </div>;
}

private doSomething() {
        this.setState({ alert_message: "ボタンが押されました。" });
}

テキストボックスを設置し、onChangeでメソッドを指定する。メソッドにはイベントを引数として持たせる。ステートオブジェクトを入力値に応じて変更させる。

DoSomething.tsx

    <p>ここに入力<input type="text" value={this.state.some_code} 
    onChange={e => this.handleOnChange(e)} /></p>

DoSomething.tsx

private handleOnChange(e: any): void {
        this.setState({ some_code: e.target.value });
}

変数の追加

ステートに入力値を入れるオブジェクトを追加する。クラスが実装するインタフェースにクラス変数として追加する。

DoSomething.tsx

interface DoSomethingExampleState {
    some_code: string;
    alert_message: string;
}

コンストラクタで初期値を与える。ここで型が決まらなければエラーになる。

DoSomething.tsx

    constructor() {
        super();
        this.state = { some_code: "", alert_message: "" };

注意点

テキストボックスの入力値をサーバへ渡すために、document.getElementByIdやgetElementByNameで要素を取得し、そのプロパティ（value）で値を取得したいところだが、ASP.NET上のテキストボックス要素はSystem.Windows.Forms.HtmlElementのためプロパティがなく、取ることができない（xml要素ならnodeValueが取得できるし、textarea要素ならinnerHTMLで値が取得できる）。
そのため、上記コードのように value = { this.state.hoge } としてステートに入れて管理するのがよい。

Angularの場合

なおReactでなくAngularを同環境で使用した場合、入力値の取得はdocument.getElementByIdで可能。下記のようにconponent.tsファイルにテキストボックスを設置すれば要素を取得した後、HTMLInputElementにキャストすることでvalueが取得できる。

dosomething.component.ts

    var inputObject= document.getElementById("code");
    var inputValue= "";
    if (inputObject!= null) {
        inputValue= (<HTMLInputElement>inputObject).value;
    }

この違いは何でしょう…？