Javascript 无法使用React JS中的Unity WebGL后台div键入输入 从“React”导入React； 从“react dom”导入react dom； 从'react Unity webgl'导入{Unity}； var timerCount=0； 导出默认类App扩展React.Component{ 建造师（道具）{ 超级（道具）； this.state={nPageNum:0}； } componentDidMount（）{ 这个,startTimer(这个),； } render（）{ 如果（时间计数>5）{ 返回( ) }否则{ 返回( ) } } 勾选（）{ timerCount=timerCount+1； 如果（时间计数>10）{ this.stopTimer（this）； } this.setState（{nPageNum:1}）； } startTimer（）{ clearInterval（这个计时器）； this.timer=setInterval（this.tick.bind（this），20）； } 停止计时器（）{ clearInterval（这个计时器）； } }

我在ReactJS中为输入框做了一个div，效果很好。但在为Unity WebGL后台输入另一个div后，键盘事件无法工作。统一集成有什么问题

以下是控制台日志：

[HMR]正在等待来自WDS的更新信号。。。 bundle.js:5945[HMR]正在等待来自WDS的更新信号。。。 js:4如果使用gzip压缩将web服务器配置为承载.unityweb文件，则可以减少启动时间。 bundle.js:9304[WDS]热模块更换已启用。 blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2初始化引擎版本：2017.2.0f3（46dda1414e51）

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））

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

blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2外部颜色缓冲区浮点数GL外部颜色缓冲区浮点数外部不相交计时器查询webgl2外部不相交计时器查询webgl2外部纹理过滤器各向异性纹理过滤器各向异性OES纹理浮点数线性纹理压缩纹理GL\u WEBGL\u压缩\u纹理\u s3tc WEBGL\u压缩\u纹理\u s3tc\u srgb GL\u WEBGL\u WEBGL\u压缩\u纹理\u s3tc\u srgb WEBGL\u调试\u渲染器\u信息GL\u WEBGL\u调试\u着色器GL\u WEBGL\u调试\u着色器WEBGL\u失去上下文GL\u失去上下文

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.055000毫秒

2blob:localhost:8000/e1696fb5-90a3-4d98-b184-aebb735ab198:2警告：2 FS.syncfs操作同时在飞行中，可能只是做额外的工作

---

我找到了解决这些问题的办法

我从这个链接找到了解决方案。

因此，我在Unity项目中添加了一些代码，并重建了Unity项目

这是统一的准则

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);
  }
}

所以我在单行为中添加了这个代码

---

然后，它工作得很好。

我找到了这个问题的解决方案

我从这个链接中找到了解决方案。

因此，我在Unity项目中添加了一些代码，并重建了Unity项目

这是统一的准则

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);
  }
}

所以我在MonoBehavior中添加了这个代码

---

然后，它工作得很好。

你的

Unity

组件的代码是什么？它只是splash动画。没有任何函数。好的。我不知道。你的

Unity

组件的代码是什么？它只是启动动画。没有任何函数。好的。我不知道。