首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React 360/React Vr的onInput不起作用

React 360/React Vr的onInput不起作用
EN

Stack Overflow用户
提问于 2019-01-10 03:20:04
回答 1查看 85关注 0票数 1

我正在创建一个基本的react 360应用程序,以便熟悉来自各种来源的输入处理。这是documentation Input Handling React 360的网页。在读完页面后,我根本不能让输入工作,也不清楚为什么。下面是我的代码:

代码语言:javascript
复制
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问题中收集到的。我不明白的是这是怎么触发的?我点击它,按下我笔记本电脑上的键盘,但什么也没有。没有太多的信息可以继续。以前有没有人遇到过这样的事情?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-10 03:35:36

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

代码语言:javascript
复制
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',
  },
}

这正如我所期望的那样工作。当我点击当前的键盘或按键时,输入对象会按预期打印出来。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54116905

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档