TIL. [react.js]stateの場合

React.jsでデータストリームを作成するときにstateを使用します.構成部品内に別の状態が必要な場合に使用します.stateは、コンストラクション関数でこの値を設定する初期値を設定する必要があります.state={}に設定します.
propsとは異なり、stateは値を変更するときに直接操作できません.this.state.comment = 'Hello';がレンダリングされないとします.this.state({comment: 'Hello'});のようにオブジェクト形式で書くべきです.
Reactだからjsの場合、setStateメソッドを使用してステータス値を直接変更しないと変更は検出されないため、jsの場合、変更された部分が検出されてレンダリングされます.
以降のrender()では、this.stateをレンダリングできます.また、ステータスをthis.setState(data, callback)で更新することもできます.このメソッドを実行すると、Reactは転送されたデータを現在の状態にマージし、render()を呼び出します.
これを使用して、ログインウィンドウを実現します.this.stateはidという初期値を設定します.その後、対応する入力onChange値を与え、状態変化時に発生した値をvalueに渡す.この過程はthisです.setStateのid:e.target.valueによって実現された.(onChangeイベントが発生した場合、e.target.value値でイベントオブジェクトの現在のテキスト値を取得できます)

constructor() {
        super();
        this.state = {
            id: ""
        };
    }

handleIdInput = (e) => {
        this.setState({
            id: e.target.value
        })
    }

<input 
         id="id"
         type="text"
         className="input_id"
         onChange={this.handleIdInput}
         value={this.state.id}
         />