使用法

元のコンポーネントを withFocusOutside でラップし、コンポーネントクラスに handleFocusOutside インスタンスメソッドを定義します。

注意: withFocusOutside は Component クラスをラップするためだけに使用する必要があります。 

  1. import { withFocusOutside, TextControl } from '@wordpress/components';
  3. const MyComponentWithFocusOutside = withFocusOutside(
  4.    class extends React.Component {
  5.    handleFocusOutside() {
  6.    console.log( 'Focus outside' );
  7.    }
  9.    render() {
  10.    return (
  11.    <div>
  12.    <TextControl onChange={ () => {} } />
  13.    <TextControl onChange={ () => {} } />
  14.    </div>
  15.    );
  16.    }
  17.    }
  18. );

上記の例では、handleFocusOutside 関数は要素からフォーカスが外れた場合にのみ呼び出され、2つの入力間でフォーカスを移動する場合には呼び出されません。