React 360/React Vr 的 onInput 不起作用答案

【问题标题】：onInput for React 360/React Vr does not functionReact 360/React Vr 的 onInput 不起作用
【发布时间】：2019-01-09 19:20:04
【问题描述】：

我正在创建一个简单的 React 360 应用程序，以便熟悉来自各种来源的输入处理。这是文档Input Handling React 360 的网页。阅读该页面后，我根本无法使输入起作用，并且不清楚原因。这是我的代码：

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class ExampleVR extends React.Component {
  render() {
    return (
  <View style={styles.panel}>
    <View style={styles.greetingBox}>

    ***********Why is this not doing anything?**************

      <View onInput={e => {
          const inputEvent = e.nativeEvent.inputEvent;
          console.log(inputEvent);
        }}>
          { /* ... */ }
      </View>

      ****************************
      <Text style={styles.greeting}>
        Welcome to React 360
      </Text>
    </View>
  </View>
);
}
};

上面的代码什么也没做，老实说，我不确定如果它确实有效，它会做什么。从文档中，我认为它将console.log 一个输入对象供我查看。这就是我从之前看到的 react vr 问题中收集到的信息。我不明白这是如何触发的？我点击它，按下笔记本电脑上的键盘，什么也没有。没有太多的信息可以继续。有没有人遇到过这样的事情？

【问题讨论】：

标签： reactjs virtual-reality react-360

【解决方案1】：

我想我想出了自己的问题以供将来参考。在上面的代码中，当我使用npm start 运行应用程序时，<View onInput={....}> 是“不可见的”。我所做的是删除示例中包含的周围视图，然后向其中添加一些样式表 css 样式。这是代码：

export default class ExampleVR extends React.Component {


render() {
    return (
        <View style={styles.input} onInput={e => {
            const inputEvent = e.nativeEvent.inputEvent;
            console.log(inputEvent);
          }}>
            { /* ... */ }
        </View>
    );
  }
};

const styles = StyleSheet.create({
  input: {
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
}

这符合我的预期。当我单击当前键盘或按键时，输入对象按预期打印。

【讨论】：