Disabled

使用法

フォームコンポーネントがあると仮定すると、<Disabled> でフォームをラップすることで、すべてのフォーム入力を無効にできます。

import { useState } from 'react';
import { Button, Disabled, TextControl } from '@wordpress/components';
const MyDisabled = () => {
   const [ isDisabled, setIsDisabled ] = useState( true );
   let input = <TextControl label="Input" onChange={ () => {} } />;
   if ( isDisabled ) {
   input = <Disabled>{ input }</Disabled>;
   }
   const toggleDisabled = () => {
   setIsDisabled( ( state ) => ! state );
   };
   return (
   <div>
   { input }
   <Button variant="primary" onClick={ toggleDisabled }>
   Toggle Disabled
   </Button>
   </div>
   );
};

コンポーネントは、<Disabled /> にラップされているかどうかを、Disabled.Context を使用して context にアクセスすることで検出できます。

function CustomButton( props ) {
   const isDisabled = useContext( Disabled.Context );
   return (
   <button
   { ...props }
   style={ { opacity: isDisabled ? 0.5 : 1 } }
   />
   );
}

注: このコンポーネントは、inert HTML 属性 をサポートしていないブラウザでは期待通りに動作しない場合があります。このコンポーネントをプロジェクトで使用する際は、公式の WICG ポリフィル を追加することをお勧めします。

プロパティ

コンポーネントは以下のプロパティを受け入れます:

isDisabled

すべての子孫フィールドを無効にするかどうか。デフォルトは true です。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: true