React HooksとCSSモジュールを使ってボタン要素のスタイルをトグル
React でクリック時にクラスを切り替える方法
React で要素をクリックしたときに、その要素の CSS クラスを切り替えることはよくあるシナリオです。これは、ボタンの状態を表したり、要素の外観を動的に変更したりするために役立ちます。
以下、2つの主要な方法と、それぞれの利点と欠点について詳しく説明します。
方法 1: state と setState を使用する
この方法は、要素の状態を管理するために React の state と setState フックを使用します。状態は、コンポーネント内のデータを表すオブジェクトであり、setState を使用して更新できます。
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
};
render() {
const { isActive } = this.state;
const className = isActive ? "active" : "";
return (
<button onClick={this.handleClick} className={className}>
ボタン
</button>
);
}
}
利点:
- 状態を使用して要素の状態を明確に管理できます。
- 他の状態更新と簡単に組み合わせることができます。
- コンポーネントのレンダリングを再トリガーする必要があるため、パフォーマンスに影響を与える可能性があります。
- 初心者にとっては理解しにくい場合があります。
方法 2: useRef と classList を使用する
この方法は、React の useRef フックと DOM 要素の classList プロパティを使用して、要素のクラスを直接操作します。
const MyComponent = () => {
const buttonRef = useRef(null);
const handleClick = () => {
buttonRef.current.classList.toggle("active");
};
return (
<button ref={buttonRef} onClick={handleClick}>
ボタン
</button>
);
};
- パフォーマンスが優れています。
- 状態を使用しないため、理解しやすい場合があります。
- 状態を管理できないため、複雑なロジックには適していない場合があります。
- useRef フックと classList API に慣れている必要がある
パフォーマンスが重要で、状態を管理する必要がない場合は、方法 2 が適しています。一方、状態を使用して要素の状態を明確に管理する必要がある場合は、方法 1 が適しています。
その他の考慮事項
- アクセシビリティ: キーボードやスクリーンリーダーなどの補助技術を使用したユーザーでも要素にアクセスできるように、適切な ARIA 属性を使用する必要があります。
*パフォーマンスの最適化: 大規模なリストをレンダリングする場合は、
shouldComponentUpdateメソッドを使用して不要なレンダリングを回避することを検討してください。
React でクリック時にクラスを切り替える：サンプルコード
以下の例は、前述の説明で紹介した 2 つの方法を実装した React コンポーネントを示しています。
方法 1: state と setState を使用する
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
isActive: false
};
}
handleClick = () => {
this.setState(prevState => ({
isActive: !prevState.isActive
}));
};
render() {
const { isActive } = this.state;
const className = isActive ? "active" : "";
return (
<button onClick={this.handleClick} className={className}>
ボタン (State)
</button>
);
}
}
方法 2: useRef と classList を使用する
const MyComponent = () => {
const buttonRef = useRef(null);
const handleClick = () => {
buttonRef.current.classList.toggle("active");
};
return (
<button ref={buttonRef} onClick={handleClick}>
ボタン (useRef)
</button>
);
};
説明:
- 上記のコードは、
MyComponentという名前の React コンポーネントを定義します。 - このコンポーネントは、
button要素をレンダリングします。 stateとsetStateを使用する方法は、isActiveという名前の状態変数を使用して、ボタンの状態を追跡します。useRefとclassListを使用する方法は、ref属性を使用して DOM 要素への参照を取得し、classList.toggle()メソッドを使用してクラスを切り替えます。- どちらの方法も、ボタンがクリックされたときに
activeクラスをトグルします。
このサンプルコードを参考に、独自の要件に合わせて調整できます。
React でクリック時にクラスを切り替える：その他の方法
前述の 2 つの主要な方法に加えて、React でクリック時にクラスを切り替えるには、いくつか補足的な方法があります。
CSS モジュールを使用すると、コンポーネント固有の CSS クラスを定義し、スコープを分離することができます。これにより、名前の衝突を回避し、コードをより整理しやすくなります。
import styles from './MyComponent.module.css';
const MyComponent = () => {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<button onClick={handleClick} className={isActive ? styles.active : styles.button}>
ボタン
</button>
);
};
カスタムフックを使用して、useState や useRef などの React フックを再利用可能なロジックにカプセル化することができます。これにより、コードをより簡潔でテストしやすくなります。
const useToggle = (initialState) => {
const [state, setState] = useState(initialState);
const toggle = () => {
setState(!state);
};
return { state, toggle };
};
const MyComponent = () => {
const { state, toggle } = useToggle(false);
return (
<button onClick={toggle} className={state ? 'active' : 'button'}>
ボタン
</button>
);
};
サードパーティライブラリを使用する
classnames や react-toggle などのサードパーティライブラリを使用して、クラスの操作を簡略化することができます。これらのライブラリは、追加機能やユーティリティを提供することがあります。
import classNames from 'classnames';
const MyComponent = () => {
const [isActive, setIsActive] = useState(false);
const handleClick = () => {
setIsActive(!isActive);
};
return (
<button onClick={handleClick} className={classNames('button', { active: isActive })}>
ボタン
</button>
);
};
考慮事項:
- 上記の方法は、それぞれ長所と短所があります。
- 使用する方法は、プロジェクトの要件と個人的な好みによって異なります。
- パフォーマンスとアクセシビリティを考慮することが重要です。
React でクリック時にクラスを切り替えるには、さまざまな方法があります。それぞれの方法の長所と短所を理解し、プロジェクトの要件に合った方法を選択することが重要です。
javascript reactjs
