使用法
withFocusReturn
import { useState } from 'react';
import { withFocusReturn, TextControl, Button } from '@wordpress/components';
const EnhancedComponent = withFocusReturn( () => (
<div>
Focus will return to the previous input when this component is unmounted
<TextControl autoFocus={ true } onChange={ () => {} } />
</div>
) );
const MyComponentWithFocusReturn = () => {
const [ text, setText ] = useState( '' );
const unmount = () => {
document.activeElement.blur();
setText( '' );
};
return (
<div>
<TextControl
placeholder="Type something"
value={ text }
onChange={ ( value ) => setText( value ) }
/>
{ text && <EnhancedComponent /> }
{ text && (
<Button variant="secondary" onClick={ unmount }>
Unmount
</Button>
) }
</div>
);
}
withFocusReturn
はオプションで高階関数の作成者として呼び出すことができます。オプションオブジェクトが提供されると、新しい高階関数が返されます。
現在、次のオプションがサポートされています:
onFocusReturn
開発者がフォーカス戻しの動作をカスタマイズできるオプションの関数です。この関数から false
の戻り値を返すことで、デフォルトのフォーカス戻しの動作をスキップすることを示す必要があります。
- タイプ:
Function
- 必須: いいえ
例:
function MyComponent() {
return <textarea />;
}
const EnhancedMyComponent = withFocusReturn( {
onFocusReturn() {
document.getElementById( 'other-input' ).focus();
return false;
},
} )( MyComponent );