ReactJSのUnity WebGLバックグラウンドdivで入力できません

Question

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {Unity} from 'react-unity-webgl'; 

var timerCount = 0; 

export default class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { nPageNum: 0}; 
    } 

    componentDidMount() { 
    this.startTimer(this); 
    } 

    render() { 
    if (timerCount > 5) { 
     return(
      <div style={{ width: '100%', height: '100%' }}> 
      <div style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 0 }}> 
       <Unity src="Libs/object_unity/Build/WebGL.json" /> 
      </div> 
      <div style={{ position: 'absolute', width: '100%', height: '100%', zIndex: 1 }}> 
       <input style={{ marginLeft:60, marginTop:100, width: 600, height: 80, zIndex: 1 }} type="text" name="title" id="title" /> 
      </div> 
      </div> 
     ) 
    } else { 
     return(
      <div> 
      <div> 
       <input style={{ marginLeft:60, marginTop:100, width: 600, height: 80, zIndex: 1 }} type="text" name="title" id="title" /> 
      </div> 
      </div> 
     ) 
    } 

    } 
    tick() { 
     timerCount = timerCount + 1; 
     if (timerCount > 10) { 
      this.stopTimer(this); 
     } 

     this.setState({ nPageNum: 1 }); 
    } 
    startTimer() { 
    clearInterval(this.timer); 
    this.timer = setInterval(this.tick.bind(this), 20); 
    } 

    stopTimer() { 
    clearInterval(this.timer); 
    } 
} 

ReactJSの入力ボックスに1つのdivを作成していましたが、うまくいきました。しかしUnity WebGLバックグラウンドの別のdivを入力すると、キーボードイベントは機能しません。 Unity統合の何が問題になっていますか？以下は

コンソールログです：

[HMR] WDSからの更新信号を待っています... bundle.js：5945 [HMR] WDSからの更新信号を待っています... UnityLoader.js ：4 gzip圧縮を使用して.unitywebファイルをホストするようにWebサーバーを設定すると、起動時間を短縮できます。 bundle.js：9304 [WDS]ホットモジュール交換が有効になっています。 ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2初期化エンジンバージョン：2017.2.0f3（46dda1414e51）

UnityLoader.js：1 WebGLの2.0コンテキストを作成します。 ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2レンダラ：WebKitのWebGLの

ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2ベンダー：WebKitの

ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2バージョン：のOpenGL ES 3.0（WebGLの2.0（のOpenGL ES 3.0クロム））

ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184- aebb735ab198：2 GLES：3

ブロブ：localhostを：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2 EXT_color_buffer_float GL_EXT_color_buffer_float EXT_disjoint_timer_query_webg L2 GL_EXT_disjoint_timer_query_webgl2 EXT_texture_filter_anisotropic GL_EXT_texture_filter_anisotropic OES_texture_float_linear GL_OES_texture_float_linear WEBGL_compressed_texture_s3tc GL_WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb GL_WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info GL_WEBGL_debug_renderer_info WEBGL_debug_shaders GL_WEBGL_debug_shaders WEBGL_lose_context GL_WEBGL_lose_context

ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2 OPENGL LOG：のOpenGL ES 3.0グラフィックス・デバイスを作成します。コンテキストレベル。コンテキスト・ハンドル1

ブロブ：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2 UnloadTime：46.0​​55000 MS

2blob：はlocalhost：8000/e1696fb5-90a3-4d98-b184-aebb735ab198：2警告：一度に2つのFS.syncfs操作が実行され、おそらく余分な作業をしている可能性があります。

Answer 1

この問題の解決方法が見つかりました。

私はこのリンクから解決策を見つけました。 https://docs.unity3d.com/ScriptReference/WebGLInput-captureAllKeyboardInput.html

私はUnityプロジェクトでいくつかのコードを追加し、Unityプロジェクトを再構築しました。

ここにUnityのコードがあります。

#if !UNITY_EDITOR && UNITY_WEBGL 
WebGLInput.captureAllKeyboardInput = false; 
#endif 

このコードをMonoBehaviourに追加しました。

そして、うまくいきます。