問題一覧に戻る
上級高度なパターンと型
問題92: 制御/非制御の切り替え

制御と非制御の両方として機能するコンポーネントの作成方法を学びます。value propが存在するかチェックしてモードを決定します。外部制御が提供された場合はそれを尊重しながら、非制御使用のための内部状態を維持します。この柔軟性により、ユーザーは使用ケースに最も適したパターンを選択できます。

import React, { useState, useEffect } from 'react';

{/* 柔軟な入力コンポーネント */}
function FlexibleInput({ value, defaultValue = '', onChange }) {
  {/* 非制御用の内部状態 */}
  const [internalValue, setInternalValue] = useState(defaultValue);
  
  {/* 制御されているかチェック */}
  const isControlled = value !== ;
  const currentValue = isControlled ?  : internalValue;
  
  const handleChange = (e) => {
    const newValue = e.target.value;
    
    if (!isControlled) {
      (newValue);
    }
    
    {/* onChangeハンドラーを呼び出し */}
    ?.(e);
  };
  
  return (
    <input 
      value={currentValue} 
      onChange={handleChange}
    />
  );
}

function App() {
  const [controlled, setControlled] = useState('');
  
  return (
    <div>
      {/* 制御された使用 */}
      <FlexibleInput 
        value={controlled} 
        onChange={(e) => setControlled(e.target.value)} 
      />
      
      {/* 非制御の使用 */}
      <FlexibleInput 
        defaultValue="Default text"
        onChange={(e) => console.log(e.target.value)}
      />
    </div>
  );
}

export default App;