過去の記事でToDoアプリの作成を進めており、見た目についてはMantineを使って整えることができました。
次に、ToDoアプリの機能面を作成したいと思います。
前回までで作成した内容は以下の記事を参照していただければと思います。
今回の記事では、ボタンコンポーネントにpropsで値を渡す仕組みを作ろうと思います。
今回の内容で、ボタンのラベル（現在”SETTINGS”となっている箇所）を自由に編集ができるようになるのと、追加ボタン、完了ボタンなどそれぞれのボタンで挙動が変わるようになります。
button.tsxを編集する。
それでは、button.tsxの編集から始めましょう。
まずはexport function DemoButton() { の一行を以下の通り書き換えます。
const DemoButton = (props: Props) => {functionではpropsの型を渡すために記述が増えてしまうので、アロー関数を使って少ない記述ようでpropsを渡すようにします。
現在ではアロー関数を使った書き方が一般的ですので、こちらに慣れていきましょう。
そして、アロー関数に変更したことでexportが必要となるので、一番最後の行にexport default DemoButton;を付け加えてください。
次にpropsとして受け取るデータの中身を先ほど記述したconstの中で宣言します。
必要となるのはボタンの名前部分とクリック時のイベント情報の2つです。
記述としては以下の１行を追加します。
const { onClick, value} = props;この記述にて、おやコンポーネントから渡されたpropsの中身をonClickとvalueの２つとする宣言が完了しました。
ここまでのコードを一旦おさらいしてみます。
前回の記事で作成したbutton.txtを編集されている場合、以下のようになっています。
import { Button } from '@mantine/core';
const DemoButton = (props: Props) => {
const { onClick, value} = props;
return (
<Button variant="default" color="orange" radius="lg" size="lg" loaderPosition="center" compact uppercase >
Settings
</Button>
);
}
export default DemoButton;続いて、propsで受け取ったvalueをボタンに表示させるように記述します。
現在Settingと書かれている箇所をpropsの内容に応じて変化させるためには、Settingの箇所を{props.value}と書き換えます。
return (
<Button variant="default" color="orange" radius="lg" size="lg" loaderPosition="center" compact uppercase >
{props.value}
</Button>
);この変更にて、親コンポーネントからvalueとして渡されたデータを表示することができるようになりました。
DemoButtonを使用する際にvalueのデータを変更するだけで、同じコンポーネントを使い回すことができるようになりました。
もうひとつpropsとして渡されているonClickを追記します。
onClickはボタンをクリックしたときにイベントを発生させるために使用しますので、以下のように<Button>タグの中に記述します。
<Button
variant="default"
color="orange"
radius="lg"
size="lg"
loaderPosition="center"
compact
uppercase
onClick={() => onClick()}
>
波括弧{}の外にあるonClickはこのコンポーネント内で宣言されたイベントです。
このButtonがクリックされたとき、{}内の処理を実行するように書かれています。
そして、波括弧{}の中には親コンポーネントから受け取ったonClickを実行するように書かれています。
最後にpropsの型定義をします。
先日の記事で紹介したtypeを使って定義しましょう。
constよりも前に以下の記述を追加してください。
type Props = {
value: string,
onClick: () => void
}propsのvalueを文字列として定義しました。
onClickはボタンがクリックされたときに何らかのイベントを起こすためのトリガーとなります。
このトリガーには文字列や数値などのデータが含まれませんので、( ) => voidと記述してください。
voidはデータがない型を意味します。
これにてbutton.txtの編集は完了です。
完成したコードは以下となります。
import { Button } from '@mantine/core';
type Props = {
value: string,
onClick: () => void
}
const DemoButton = (props: Props) => {
const { onClick, value} = props;
return (
<Button variant="default" color="orange" radius="lg" size="lg" loaderPosition="center" compact uppercase onClick={() => onClick()}>
{props.value}
</Button>
);
}
export default DemoButton;index.tsxを編集する。
続いてindex.tsxを修正します。
修正する箇所はreturn内の<DemoButton>タグ内です。
タグの中にpropsとして渡すデータを記述します。
<DemoButton
value={"タスクを登録"} onClick={A}
></DemoButton>button.tsxではpropsとしてvalueとonClickを受け取るので、その2つをタグの中に記述しました。
index.tsxで使用しているボタンはタスクを登録するためのボタンなので、valueに”タスクを登録”という値を入れています。
この波括弧{}内のデータがpropsとして子コンポーネントに渡されます。
onClickには仮の値としてAという値を入れています。
このonClickでは、ボタンをクリックしたときに実際に発生させる処理を関数として渡すことになります。
今はまだ処理を関数として宣言していないのでひとまず適当な値を入れておきましょう。
また、このままだとAが存在していないというエラーが発生してしまいますので、export default function Home() { より前に以下の記述を追加してください。
const A = () => {
console.log("test")
}この記述にてAという関数宣言しました。
ボタンをクリックすることでonClickイベントにて関数Aが実行されます。
関数Aはコンソールログ上に”test”という文字列を表示させる内容となっています。
実際はタスクを登録するための処理を波括弧{}内に記述することになりますので、関数を作成する際に改めてご説明します。
index.tsxの編集は一旦ここでストップしますので、現在のコードを確認してみましょう。
const A = () => {
console.log("test")
}
export default function Home() {
return (
// 中略
<DemoButton
value={"タスクを登録"} onClick={A}
></DemoButton>
// 中略
)
}ライブラリやコンポーネントのimportとreturn内の編集していない箇所は省略しています。
list.tsxを編集する。
もう一箇所DemoButtonを使用している箇所がlist.tsx内のなるので、こちらも同じく修正します。
修正内容はindex.tsxと同じなのでまとめてご説明します。
こちらが修正後のlist.tsxになります。
import DemoButton from './button'
const elements:string[] = ["task1", "task2", "task3"]
const A = () => {
console.log("test")
}
function DemoList() {
return (
<ul>
{elements.map((element) => {
return(
<li>
{element}
<DemoButton
value={"タスク完了"}
onClick={A}
></DemoButton>
</li>
)
})}
</ul>
);
}
export default DemoList修正内容としては、仮の関数Aを宣言したことと<DemoButton>タグ内にvalueとonClickを追加しています。
こちらのボタンはタスク完了時にリストからタスクを削除するために使用しますので、関数Aには削除ようの関数を作成する予定です。
また、valueには”タスク完了”という値を入れています。
ここまで修正が完了しましたら、一度全ての編集したファイルを保存して、サーバーを立ち上げ、localhostにアクセスしてみましょう。
ボタンがそれぞれの用途に合わせて変更されていたら、修正は完了です。
ブラウザでコンソールを開いた後ボタンをクリックすることでtestというログが表示されているはずです。
コンソールは使用しているブラウザによって表示方法が異なりますので、環境に合わせて表示方法を調べてみてください。
今回のpropsでデータを受け渡すための記述に関する記事は以上となります。
まとめ
propsを渡すために子コンポーネントをアロー関数に変更した。
アロー関数内で受け取る値を宣言して、宣言した値をreturn内に反映させた。（onClickとvalueの追加）
typeにて受け取るpropsの型を定義した。（イベントはvoidという型を宣言する。）
export defaultにてコンポーネントを親コンポーネントから参照できるようにする。
index.tsxとlist.tsxの<DemButton>タグ内にpropsとして渡すvalueとonClickを追加した。
valueは用途に合わせてボタンの表示を変更した。
onClickには仮で作成した関数Aを追加した。（関数Aはコンソールログでtestと表示させる関数）
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント