Reactにて条件分岐による表示内容(component)の切り替え方法を紹介致します。
1.前回の記事について
前回の記事ではuseStateについて解説しました。
本記事では、前回記事で使ったコードを元に変更・追加をしていきます。
条件分岐によるcomponent表示切り替え方法だけであれば、本記事内のコードだけで理解できるようにしています。
2.条件分岐による切り替え
「Add New」ボタンのクリックにより、表示内容を切り替え、「Cancel」ボタンによって元の表示にする例を紹介します。
条件分岐による切り替え方法は、いくつかあります。
2.1 && を使う
NewExpense.js
import React, { useState } from 'react';
import ExpenseForm from './ExpenseForm';
import './NewExpense.css';
const NewExpense = (props) => {
const [isEditing, setIsEditing] = useState(false);
const editingHandler = () => {
setIsEditing(true);
}
const stopEditingHandler = () => {
setIsEditing(false);
}
return (
<div className='new-expense'>
{!isEditing && <button onClick={editingHandler}>Add New</button>}
{isEditing && <ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />}
</div>
);
};
export default NewExpense;
追加変更点
const [isEditing, setIsEditing] = useState(false);
trueとfalseに切り替えを管理するflagとしてisEditingを用意します。
{!isEditing && <button onClick={editingHandler}>Add New</button>}
!isEditing つまり、isEditingがfalseのときは、「Add New」ボタンが表示されるようにします。
{isEditing && <ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />}
!isEditing つまり、isEditingがfalseのときは、「Add New」ボタンが表示されるようにします。
{isEditing && <ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />}
isEditingがtrueのときは、ExpenseFormが表示されるようにします。
onStopは、「Cancel」ボタンが押されたときの処理になります。
ボタンは、ExpenseForm内に追加します。
ExpenseForm.js
import { useState } from 'react';
import './ExpenseForm.css';
const ExpenseForm = (props) => {
…
return (
<form onSubmit={submitHandler}>
<div className='new-expense__controls'>
<div className='new-expense__control'>
<label>Title</label>
<input type='text' onChange={titleChangeHandler} />
</div>
<div className='new-expense__control'>
<label>Price</label>
<input type='number' min='0.01' step='0.01' onChange={priceChangeHandler} />
</div>
<div className='new-expense__control'>
<label>Date</label>
<input type='date' min='2019-01-01' max='2022-12-31' onChange={dateChangeHandler} />
</div>
</div>
<div className='new-expense__actions'>
<button type='submit'>+ Add</button>
<button type="button" onClick={props.onStop}>Cancel</button>
</div>
</form>
);
}
export default ExpenseForm;
以下のボタンを追加します。
<button type="button" onClick={props.onStop}>Cancel</button>
props.onStopはNewExpenseから渡されるカスタムEvent handlerです。
「Add New」を押下すると、フォームが表示されます。
「Add New」を押下すると、以下のフォームに切り替わります。
「Cancel」を押下すると、初期表示時の「Add New」ボタン表示に切り替わります。
2.2 : 三項演算子を使う
NewExpense.js
const NewExpense = (props) => {
…
return (
<div className='new-expense'>
{isEditing ?
<ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />
:
<button onClick={editingHandler}>Add New</button>
}
</div>
);
};
export default NewExpense;
{条件 ? trueのときの内容 : falseのときの内容 }
三項演算子では、trueとfalseのどちらもときの処理もまとめることができます。
2.3 関数を定義してif文で分岐
NewExpense.js
const NewExpense = (props) => {
const [isEditing, setIsEditing] = useState(false);
const editingHandler = () => {
setIsEditing(true);
}
const stopEditingHandler = () => {
setIsEditing(false);
}
const AddExpenseForm = () => {
if(isEditing) {
return <ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />
} else {
return <button onClick={editingHandler}>Add New</button>
}
}
return (
<div className='new-expense'>
<AddExpenseForm />
</div>
);
};
export default NewExpense;
NewExpenseの中に新しい arrow関数を定義します。
const AddExpenseForm = () => {
if(isEditing) {
return <ExpenseForm onAddExpense={props.onAddExpense} onStop={stopEditingHandler} />
} else {
return <button onClick={editingHandler}>Add New</button>
}
}
JSXコードの中に、AddExpenseFormを追加します。
return (
<div className='new-expense'>
<AddExpenseForm />
</div>
);
3.まとめ
条件分岐によるcomponentの表示切り替え方法を紹介致しました。
いずれも挙動自体は同じになります。
用途に応じて&&や三項演算子は使い分けをすればよいかと思います。
また条件が複雑な場合は、関数を定義してJSXコードを簡潔にすることで見やすくなるかと思います。
