Reactのイベントの書き方について学ぶ

学んだこと

イベントの書き方

• ボタンの場合、以下の様に onClick 関数を呼び出し、クリックされた場合特定の処理を実行する。
• {}内の記述は JS と認識されている。

export const App = () => {
  return (
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
      <button onClick={()=> alert()}>ボタン</button>
    </>
  );
};

• 現在のままだと、<button onClick={()=> alert()}>ボタン</button>は可読性が良くない。
  • 理由としては、onClick 内の処理が多くなると処理自体複雑化し、処理が追いづらい。
  • そのため、この部分は関数化を行うべき。
• 下記の様に return の前に関数を用意し、onClick で実行するようにするべき。

export const App = () => {
  const onClickButton = () => alert();
  return (
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
      {console.log('hoge')}
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

• イベントとは関係がないが、以下の様に関数を呼び出すことも可能
• 呼び出す場合は｛｝で関数の呼び出し部分を囲む。

export const App = () => {
  return (
    <>
      <h1>こんにちは！</h1>
      <p>お元気ですか</p>
      {console.log("hoge")}
      <button onClick={()=> alert()}>ボタン</button>
    </>
  );
};

スタイルの書き方

• <タグ名 style=>のようにスタイルを記述する。

export const App = () => {
  const onClickButton = () => alert();
  return (
    <>
      <h1 style=>こんにちは！</h1>
      <p>お元気ですか</p>
      {console.log('hoge')}
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

• 以下の様にスタイルを渡すことも可能
  • スタイルにてfont-sizeのようなプロパティ名をしており、HTML でスタイルを設定する際はこのプロパティ名で設定を行う。
  • しかし React ではプロパティ名をスネークケースで書く必要がある。
  • 例えば、font-sizeを指定したい場合はfontSizeとプロパティ名を設定する必要がある。

export const App = () => {
  const onClickButton = () => alert();
  const contentStyle = { color: 'blue', fontSize: '18px' };
  return (
    <>
      <h1 style={contentStyle}>こんにちは！</h1>
      <p>お元気ですか</p>
      {console.log('hoge')}
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

Props を知る

• Props とは、コンポーネント間でデータを渡すための仕組みのこと。
• 以下の様に、コンポーネント呼び出し時に各種データを渡すようにしている。
  • 渡すデータは関数側で定義する必要がなく、好きなデータを渡すことができる。

import { ColorfulMessage } from './components/ColorfulMessage';
export const App = () => {
  const onClickButton = () => alert();
  const contentStyleA = { color: 'blue', fontSize: '18px' };
  const contentStyleB = { color: 'green', fontSize: '18px' };
  return (
    <>
      <h1 style={contentStyleA}>こんにちは！</h1>
      <ColorfulMessage color="blue" message="お元気ですか？" />
      <ColorfulMessage color="green" message="元気です！" />
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

• ColorfulMessage の定義
• 関数側では、受け取る予定の prop 名を使って処理を記述。

export const ColorfulMessage = (props) => {
  const contentStyleA = {
    color: props.color,
    fontSize: '18px',
  };

  return <p style={contentStyleA}>{props.message}</p>;
};

• 上記の処理でも OK だが、普通の P タグを使って記述することで可読性を上げる事もできる。
• このように修正を行うと、囲っているタグ内の階層もすべて取得し、表示することができる。

import { ColorfulMessage } from './components/ColorfulMessage';
export const App = () => {
  const onClickButton = () => alert();
  const contentStyleA = { color: 'blue', fontSize: '18px' };
  const contentStyleB = { color: 'green', fontSize: '18px' };
  return (
    <>
      <h1 style={contentStyleA}>こんにちは！</h1>
      // ColorfulMessageで囲む。
      <ColorfulMessage color="blue">お元気ですか？</ColorfulMessage>
      <ColorfulMessage color="green">元気です！</ColorfulMessage>
      <button onClick={onClickButton}>ボタン</button>
    </>
  );
};

export const ColorfulMessage = (props) => {
  const contentStyleA = {
    color: props.color,
    fontSize: '18px',
  };

  // props.childrenでColorfulMessageで囲っている中のものを取得することができる。
  return <p style={contentStyleA}>{props.children}</p>;
};

応用

• 以下の様な書き方を行うことができる。
• 修正前

export const ColorfulMessage = (props) => {
  const contentStyleA = {
    color: props.color,
    fontSize: '18px',
  };

  return <p style={contentStyleA}>{props.children}</p>;
};

• 修正後
  • props を分割代入を行うようにできる。
    • コンポーネント内で行うかコンポーネントを宣言時に行うかプロジェクトによりけり
  • contentStyleA を定義時に、同じプロパティ名であれば省略することができる。

export const ColorfulMessage = ({ color, children }) => {
  // この分割代入でもOK
  const {color, children} = props

  const contentStyleA = {
    color,
    fontSize: '18px',
  };

  return <p style={contentStyleA}>{children}</p>;
};