使用法

withFocusReturn

  1. import { useState } from 'react';
  2. import { withFocusReturn, TextControl, Button } from '@wordpress/components';
  3. const EnhancedComponent = withFocusReturn( () => (
  4. <div>
  5. Focus will return to the previous input when this component is unmounted
  6. <TextControl autoFocus={ true } onChange={ () => {} } />
  7. </div>
  8. ) );
  9. const MyComponentWithFocusReturn = () => {
  10. const [ text, setText ] = useState( '' );
  11. const unmount = () => {
  12. document.activeElement.blur();
  13. setText( '' );
  14. };
  15. return (
  16. <div>
  17. <TextControl
  18. placeholder="Type something"
  19. value={ text }
  20. onChange={ ( value ) => setText( value ) }
  21. />
  22. { text && <EnhancedComponent /> }
  23. { text && (
  24. <Button variant="secondary" onClick={ unmount }>
  25. Unmount
  26. </Button>
  27. ) }
  28. </div>
  29. );
  30. }

withFocusReturn はオプションで高階関数の作成者として呼び出すことができます。オプションオブジェクトが提供されると、新しい高階関数が返されます。

現在、次のオプションがサポートされています:

onFocusReturn

開発者がフォーカス戻しの動作をカスタマイズできるオプションの関数です。この関数から false の戻り値を返すことで、デフォルトのフォーカス戻しの動作をスキップすることを示す必要があります。

  • タイプ: Function
  • 必須: いいえ

例:

  1. function MyComponent() {
  2. return <textarea />;
  3. }
  4. const EnhancedMyComponent = withFocusReturn( {
  5. onFocusReturn() {
  6. document.getElementById( 'other-input' ).focus();
  7. return false;
  8. },
  9. } )( MyComponent );