From 2c684c1f5efabf5c2b37e2e9abae01965726d58f Mon Sep 17 00:00:00 2001 From: summertree128 Date: Tue, 5 Feb 2019 15:59:16 +0900 Subject: [PATCH] fix some part according to review --- content/docs/reference-events.md | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index ce824d574..bc208c089 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -10,7 +10,7 @@ category: Reference ## 概要 -あなたの書くイベントハンドラには、 `SyntheticEvent` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。`stopPropagation()` と `preventDefault()` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちます。この 2つ以外はすべてのブラウザで同じように機能します。 +イベントハンドラには、`SyntheticEvent` のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。`stopPropagation()` と `preventDefault()` を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするようになっています。 何らかの理由で実際のブラウザイベントが必要な場合は、単に `nativeEvent` 属性を使用するだけで取得できます。すべての `SyntheticEvent` オブジェクトは以下の属性を持っています。 @@ -33,16 +33,19 @@ string type > 補足 > -> v0.14以降、イベントハンドラから false を返してもイベントの伝播が止まることはなくなりました。代わりに、`e.stopPropagation()` または `e.preventDefault()` を手動で呼び出す必要があります。 +> v0.14以降、イベントハンドラから `false` を返してもイベントの伝播は止まりません。代わりに、`e.stopPropagation()` または `e.preventDefault()` を手動で呼び出す必要があります。 ### イベントのプール -`SyntheticEvent` はプールされます。つまり、`SyntheticEvent` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に無効化されます。これはパフォーマンス上の理由からです。そのため、非同期的な方法でイベントにアクセスすることはできません。 +`SyntheticEvent` はプールされます。つまり、`SyntheticEvent` オブジェクトは再利用され、すべてのプロパティはイベントコールバックが呼び出された後に `null` で初期化されます。 +これはパフォーマンス上の理由からです。 +そのため、非同期処理の中でイベントオブジェクトにアクセスすることはできません。 + ```javascript function onClick(event) { - console.log(event); // => 無効なオブジェクト + console.log(event); // => null で初期化されるオブジェクト console.log(event.type); // => "click" const eventType = event.type; // => "click" @@ -51,7 +54,7 @@ function onClick(event) { console.log(eventType); // => "click" }, 0); - // これは動作しません。this.state.clickEvent はnull値のみを保持します。 + // これは動作しません。this.state.clickEvent は null 値のみを持つオブジェクトとなります。 this.setState({clickEvent: event}); // イベントプロパティをエクスポートすることは可能です。 @@ -61,13 +64,13 @@ function onClick(event) { > 補足 > -> 非同期処理でイベントのプロパティにアクセスしたい場合は、`event.persist()` をイベント内で呼び出す必要があります。これにより、プールから合成イベントが削除され、イベントへの参照をコードで保持できるようになります。 +> 非同期処理の中でイベントのプロパティにアクセスしたい場合は、`event.persist()` をイベント内で呼び出す必要があります。これにより、合成イベントがイベントプールの対象から除外され、イベントへの参照をコードで保持できるようになります。 ## サポートするイベント React はイベントを正規化して、異なるブラウザ間で一貫したプロパティが保持されるようにしています。 -以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に `Capture` を追加します。たとえば、`onClick` の代わりに `onClickCapture` を使用して、キャプチャフェーズでクリックイベントを処理します。 +以下のイベントハンドラはイベント伝搬のバブリングフェーズで呼び出されます。キャプチャフェーズのイベントハンドラを登録するには、イベント名に `Capture` を追加します。たとえば、キャプチャフェーズでクリックイベントを処理するには `onClick` の代わりに `onClickCapture` を使用します。 - [クリップボードイベント](#clipboard-events) - [コンポジションイベント](#composition-events) @@ -245,7 +248,7 @@ boolean isPrimary クロスブラウザサポートについての補足： -すべてのブラウザでポインタイベントがサポートされているわけではありません（この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です）。標準に準拠したポリフィルは `react-dom` のバンドルサイズを大幅に増加させるため、Reactは意図的に他のブラウザのポリフィルをサポートしません。 +すべてのブラウザでポインタイベントがサポートされているわけではありません（この記事の執筆時点でサポートされているブラウザは、Chrome、Firefox、Edge、および Internet Explorer です）。標準に準拠したポリフィルは `react-dom` のバンドルサイズを大幅に増加させるため、React は意図的にその他ブラウザのためのポリフィルを提供しません。 アプリケーションでポインタイベントが必要な場合は、サードパーティのポインタイベントポリフィルを追加することをお勧めします。