React.js勉強中に気になった些細なこと

なんやねん

React.jsの勉強中に気になった部分
サンプルコードは公式から誰でも見れるし内容についての話じゃないので大丈夫だと思うけど怒られたら消します

ほんで？

<script type="text/babel">
let dom = document.querySelector('#root');

let message = 'お名前は？：';
let nameVal = '';


let doChange = (event)=>{
    nameVal = event.target.value;
    message = 'こんにちは、' + nameVal + 'さん';
};


let doAction = (event)=>{
    let element = (
    <div>
        <p>{message}</p>
        <div>
            <input type="text" id="input" onChange={doChange} />
            <button onClick={doAction}>
                クリック
            </button>
        </div>
    </div>
    );
    ReactDOM.render(element, dom);
};


doAction();
</script>

ふむふむ

クリックイベントのサンプルですね

ん？

<input type="text" id="input" onChange={doChange} />
            <button onClick={doAction}>
                クリック
            </button>

ここの部分
クリックイベントでレンダリングしてるけど、onChange（inputの中身を変更する）のたびにレンダリングするように変えればそうなるって理解でOKだよね（イベントだから）

・・・

確かめずにはいられない！！

let doAction = (event)=>{
    nameVal = event.target.value;
    message = 'こんにちは、' + nameVal + 'さん';

    let element = (
    <div>
        <p>{message}</p>
        <div>
            <input type="text" id="input" onChange={doAction} />
            <button  onClick={doAction}>
                クリック
            </button>
        </div>
    </div>
    );
    ReactDOM.render(element, dom);
};

確かめるだけならこれでOKかな、確かめよう

よし、onChangeのたびに表示が変わった！
スッキリ！！

そんな、ほぼ日記のような些細なこと