8

キーボード ショートカットは、Web アプリケーションで管理するのが少し難しいです。

コンポーネントを検討しWidgetます。

キーボード ショートカットに基づいて、特定の要素にフォーカスし、このコンポーネントで関数を実行できるようにしたいと考えています。

class Widget extends React.Component {
  componentDidMount() {
    this.setBindings()
  },
  componentWillUnmount() {
    this.removeBindings();
  }
}

setBindings と removeBindings は、 mousetrapのようなライブラリを使用して、特定のキーボード ショートカットをバインドします。

さて、上記の解決策には 2 つの問題があります。

  1. キーボード ショートカットの動作が予測不能になります
    • 2 つのウィジェットがマウントされ、一方が他方をオーバーライドする場合を考えてみましょう
  2. ウィジェットはショートカットと密接に結合されます。ショートカットを使用したくない場合は、何らかのフラグをオンにする必要がありますWidget。この破棄はコードの「粒度」です。理想的には、ユーザーは Widget を使用してから WidgetWithShortcuts などを使用できる必要があります。

別の潜在的な解決策は、インスタンスを渡すことです

const widgetShortcuts = (widgetInstance) => {
  return {
   'ctrl i': () => widgetInstance.focusInput(),
  }
}

2番目のソリューションの問題は次のとおりです。

  1. widgetInstance は、focusSomeThing や invokeProp など、公開されている多くのメソッドを公開する必要があります。

  2. Widget特定の場所にキーボード ショートカットを表示するツールチップが必要な場合は、キーボード ショートカットに関する情報が別の場所に複製されます。ある場所でショートカットを変更し、別の場所でそれを忘れることが可能になります

上記の問題を解決してキーボード ショートカットを実装する方法について、ベスト プラクティスやアイデアはありますか?

4

2 に答える 2

1

あなたの最善の策は、最上位でキーボード ショートカット リスナーをセットアップし、ショートカットが発生したことを気にするかどうかわからないコンポーネントに情報を渡すことだと思います。これにより、リスナーを複数回バインドする可能性がある問題 1 が解決され、コンポーネント関数を公開する必要もなくなります。

class ShortcutProvider extends Component {
   state = { shortcut: null }

   componentDidMount() {
     // shortcut library listener
     onShortcut(shortcut => this.setState({ shortcut })
   }

   render() {
     <App shortcut={this.state.shortcut} />
   }
}

次に、ウィジェットは小道具の変更に反応する (または反応しない) ことができます。

class Widget extends Component {
  ...

  componentWillReceiveProps(nextProps) {
    if (this.state.shouldReactToShortcut) {
      if (nextProps.shortcut === 'ctrl i') {
        // do something
      }
    }
  }

  ...
}

ショートカット プロップ ダウンを多くのコンポーネントに渡している場合は、ショートカットの状態をコンテキストに入れる価値があるかもしれません。

于 2016-09-20T22:51:28.843 に答える