無法在React JS中使用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中為Input Box設置了一個div，它運行良好。 但是在為Unity WebGL背景輸入了另一個div之后，鍵盤事件將不起作用。 Unity集成怎么了？

下面是控制台日志：

[HMR]等待來自WDS ...的更新信號... bundle.js：5945 [HMR]等待來自WDS ...的更新信號... UnityLoader.js：4如果將Web服務器配置為承載.unityweb，則可以減少啟動時間使用gzip壓縮的文件。 bundle.js：9304 [WDS]啟用熱模塊更換。 blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2初始化引擎版本：2017.2.0f3（46dda1414e51）

UnityLoader.js：1創建WebGL 2.0上下文。 blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2渲染器：WebKit WebGL

blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2供應商：WebKit

blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2版本：OpenGL ES 3.0（WebGL 2.0（OpenGL ES 3.0 Chromium））

blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2 GLES：3

斑點：本地主機：8000 / e1696fb5-90a3-4d98-B184-aebb735ab198：2 EXT_color_buffer_float GL_EXT_color_buffer_float EXT_disjoint_timer_query_webgl2 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

blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2 OPENGL日志：創建OpenGL ES 3.0圖形設備； 語境水平; 上下文句柄1

blob：localhost：8000 / e1696fb5-90a3-4d98-b184-aebb735ab198：2卸載時間：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中添加了此代碼。

然后，它運行良好。