初めてのREACT-v4

初めてのREACT-4

今回はボタンの数を増やしてそれぞれの機能を実装したい場合どのようにかけば良いかを勉強したいと思います。

JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。
https://jscomplete.com/playground

今回のコード

function Button(props) {
  const handleClick = () => props.onClickFunction(props.increment);
	return (
  	<button onClick={handleClick}>
      +{props.increment}
    </button>
  );
}

function Display(props) {
	return (
  	<div>{props.message}</div>
  );
}

function App() {
	const [counter, setCounter] = useState(0);
  const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);
	return (
    <div>
      <Button onClickFunction={incrementCounter} increment={1} />
      <Button onClickFunction={incrementCounter} increment={5} />
      <Button onClickFunction={incrementCounter} increment={10} />
      <Button onClickFunction={incrementCounter} increment={100} />
      <Display message={counter}/>
    </div>  
  );
}

ReactDOM.render(
  <App />, 
  document.getElementById('mountNode'),
);

前回のコードを編集して、それぞれの数が 1, 5, 10, 100,ずつ増えるボタンを追加していきたいと思います。

コードの説明

前回のコードに続いてButton要素にincrementという新しい属性を追加していきます。ここで渡す必要のある値はNumber型となるのでincrement="1"のようにしてしまうと文字列としての数字が渡されるため{}で囲うようにしましょう。

  <Button onClickFunction={incrementCounter} increment={1} />
  <Button onClickFunction={incrementCounter} increment={5} />
  <Button onClickFunction={incrementCounter} increment={10} />
  <Button onClickFunction={incrementCounter} increment={100} />

それらを出力する為にButtonコンポーネントのbutton要素に{props.increment}を追加していきます。

  <button onClick={handleClick}>
    +{props.increment}
  </button>

次にincrementValueについてですが、引数にincrementValueをいれることでincrementCounter関数を呼び出すと異なる値が表示可能となります。

  const incrementCounter = (incrementValue) => setCounter(counter+incrementValue);

onClickFunctionをonClickで利用する為にhandleClickという変数を作成します。
const handleClick = props.onClickFunction(props.increment);
一見これで動きそうな気がしますが、残念ながら引数を渡す場合はonClickEventハンドラーの関数参照が必要な為関数である必要があります。

  const handleClick = () => props.onClickFunction(props.increment);

あとはonClickに先ほど代入したhandleClickを入れてあげるとそれぞれ独立したボタンが完成します。

まとめ

今回はボタンの数を増やしてそれぞれ独立した値を持つにはどのようにすれば良いかを勉強しました。ぜひIDEを使って試しに書いてみてください。

ブログの投稿ログ

# 初めてのREACT-4

# 今回のコード

# コードの説明

# まとめ

初めてのREACT-4

今回のコード

コードの説明

まとめ