Reactでカウンターアプリの中身を実装していこう
countの値を増減させましょう
src/app.js
let count=0;
const addOne = () =>; {
count ++;
console.log('addOne', count);
};
const minusOne = () =>; {
count --;
console.log('minusOne', count);
};
const reset = () =>; {
count = 0;
console.log('reset', count);
};
今の状態だと、logに表示される値は変わるようになります。
でも、h1のところにある値は変わりません。
この問題に対処するためには、countの値を変更したあとに、改めてレンダリング(表示)してやる必要があります。
表示部分の関数化
このように表示部分を関数化しましょう。
src/app.js
const renderCounterApp = () => {
let template = (
<div>
<h1>Count: {count}</h1>
<button onClick={addOne}>+1</button>
<button onClick={minusOne}>-1</button>
<button onClick={reset}>reset</button>
</div>
);
ReactDOM.render(template, document.getElementById('app'));
};
renderCounterApp();
renderCounterApp関数を随時、呼び出してやれば、常に表示が変わるようになるはずです。全体は、このようになっています。(src/app.js)
let count=0;
const addOne = () => {
count ++;
console.log('addOne', count);
renderCounterApp();
};
const minusOne = () => {
count --;
console.log('minusOne', count);
renderCounterApp();
};
const reset = () => {
count = 0;
console.log('reset', count);
renderCounterApp();
};
const renderCounterApp = () => {
let template = (
<div>
<h1>Count: {count}</h1>
<button onClick={addOne}>+1</button>
<button onClick={minusOne}>-1</button>
<button onClick={reset}>reset</button>
</div>
);
ReactDOM.render(template, document.getElementById('app'));
};
renderCounterApp();
この状態で、ボタンを押せば、<h1>タグの中にあるcountの値が変わることがわかるはずです。
捕捉説明ですが、JavaScriptの無名関数は、このようにして定義できます。どちらの記法も同じ意味です。
var test = () => {
alert('hello');
}
var test2 = function() {
alert('hello');
}
この記事が気に入ったらサポートをしてみませんか?