[React:State、Props、Event-1.Stateを使用]

State

状態:状態

「

」は、素子内部素子の状態値を意味する.

stateは、画面に表示する構成部品の情報(ステータス)を含むオブジェクトです.

オブジェクト自体.

ステータスは構成部品で定義および使用され、データ(オブジェクト)は随時変更されます.

構造関数はstateを囲む構造にすぎない.

Props

props:properties(プロパティ)

単語は、構成部品の属性値を表す.

propsは、親コンポーネントからデータを受信するオブジェクトです.

propsでは、ステータスのステータス値とイベントハンドラを親コンポーネントから子コンポーネントに渡すことができます.

親が子の属性を継承する

状態

を利用する.
App.js

import React from 'react';

class State extends React.Component {

    constructor() {
        super();
        this.state = {
            color : 'red'
        };
    }

    render() {
        return (
            <div>
                <input style={{color : this.state.color}} type="text" value="id">            
                </input>
                <button>로그인</button>
            </div>
        );
    }
}
export default State;

:constructorで指定したステータスプロパティ{color}からrender関数で入力した値にアクセスし、inlineスタイルで受信します.

<input style= 
    {{color : this.state.color}} 
    type="text" value="id”>

// this : 해당 컴포넌트 
// this.state : 해당 컴포넌트의 state 객체 
// this.state.color : state 객체의 특정 key(color)값. 

つまり、「赤」状態(オブジェクト自体)のオブジェクト属性を使用して、オブジェクトキー値にアクセスするようにstyleを適用します!

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import State from './App';

ReactDOM.render(<State />,
document.getElementById('root'));

Stateでステータス値を設定する理由は、コンポーネント内の要素にステータス値を反映して画面に表示するためです(UI).
2つのステータスにアクセスし、inline styleで同時に適用します.

import React from 'react';

class State extends React.Component {

    constructor() {
        super();
        this.state = {
            color1 : ‘red’, 
            color2 : 'white’,    
            backgroundColor : 'blue'
        };
    }

    render() {
        return (
            <div>
                <input 
                    style={{color : this.state.color1}} 
                    type="text" value="id">            
                </input>
                <button 
                    style={{backgroundColor : this.state.backgroundColor,
                            color : this.state.color2}}>
                로그인</button>
            </div>
        );
    }
}

export default State;

:ボタン内のinline styleに2つのステータス値を適用する場合.{ { style1 : state1 , style2: state2 } } オブジェクトを作成するように、オブジェクトを「,」に分類して適用するかどうかを決定します.