Javascript 使用“在使用时”来反应材料UI tap事件问题;反应点击事件插件";:&引用^“1.0.0”;

Javascript 使用“在使用时”来反应材料UI tap事件问题;反应点击事件插件";:&引用^“1.0.0”;,javascript,reactjs,ecmascript-6,material-ui,Javascript,Reactjs,Ecmascript 6,Material Ui,面临移动设备的React选项卡事件问题。下面有个错误。我的主要问题是,我不确定我应该仍然使用react-tao事件插件,还是有一些react-native方法来处理这个问题 我已将“^1.0.0”作为npm软件包安装了“react-tap事件插件”:。我还调用了tap事件seem my、main.js、app.js和route.js文件 Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from

面临移动设备的React选项卡事件问题。下面有个错误。我的主要问题是,我不确定我应该仍然使用react-tao事件插件,还是有一些react-native方法来处理这个问题

我已将“^1.0.0”作为npm软件包安装了“react-tap事件插件”:。我还调用了tap事件seem my、main.js、app.js和route.js文件

Warning: Unknown prop `onTouchTap` on <button> tag. Remove this prop from the element. 
    in button (created by EnhancedButton)
    in EnhancedButton (created by RaisedButton)
    in div (created by Paper)
    in Paper (created by RaisedButton)
    in RaisedButton (created by MaterialButton)
    in MaterialButton (created by Home)
    in div (created by Home)
    in div (created by Home)
    in div (created by Home)
    in Home (created by Connect(Home))
    in Connect(Home) (created by RouterContext)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by RouterContext)
    in RouterContext
    in Provider
警告:标签上的“onTouchTap”属性未知。从元件上拆下此道具。
in按钮(由EnhancedButton创建)
in EnhancedButton(由RaisedButton创建)
在div中(由纸张创建)
纸上(由RaisedButton创建)
in RaisedButton(由MaterialButton创建)
in MaterialButton(由主页创建)
在div中(由Home创建)
在div中(由Home创建)
在div中(由Home创建)
在主视图中(由Connect(主视图)创建)
in Connect(主页)(由RouterContext创建)
在div中(由应用程序创建)
in-MuiThemeProvider(由应用程序创建)
应用内(由RouterContext创建)
在RouterContext中
输入提供者
Main.js-->

导入'whatwg fetch';
从“React”导入React;
从“react dom”导入react dom;
从“react redux”导入{Provider}
从“react Router”导入{Router,browserHistory};
从“react-tap事件插件”导入injectTapEventPlugin;
从“/store/configureStore”导入configureStore;
从“/routes”导入getRoutes;
//需要打开水龙头
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const store=configureStore(窗口初始状态);
ReactDOM.render(
,
document.getElementById('app')
);
App.js-->

从“React”导入React;
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider;
从“./头”导入头;
从“./Footer”导入页脚;
类应用程序扩展了React.Component{
render(){
返回(
{this.props.children}
);
}
}
导出默认应用程序;
Routes.js-->

从“React”导入React;
从“react router”导入{IndexRoute,Route};
从“./components/App”导入应用程序;
从“./components/Home”导入Home;
从“./components/Contact”导入联系人;
从“/components/NotFound”导入NotFound;
从“./components/Account/Login”导入登录名;
从“./components/Account/Signup”导入注册;
从“./components/Account/Profile”导入配置文件;
从“./components/Account/Forget”导入忘记的内容;
从“./components/Account/Reset”导入重置;
导出默认函数getRoutes(存储){
const ensureAuthenticated=(nextState,replace)=>{
如果(!store.getState().auth.token){
替换('/login');
}
};
常数SkipFauthenticated=(下一状态,替换)=>{
if(store.getState().auth.token){
替换(“/”);
}
};
常量clearMessages=()=>{
仓库调度({
键入:“清除消息”
});
};
返回(
);
}
尝试添加

import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();

在使用它的组件中,而不是在顶部
main.js
级别。

链接到,但我不确定那里的答案是否仍然正确,或者我是否误解了它。您是否尝试过导入它,并在需要时调用它,而不是仅在顶部级别?我之所以这样说,是因为这个例子在实际使用onTouchTap的组件中有它。事实上,我在另一个我使用过的应用程序中没有这样做。不管怎样,我现在要测试它。我不知道它是否有效,我自己不使用材质UI。只要看看你链接的SO和你的东西之间的区别。@Ajma只要加上这个作为答案,我就接受了。刚刚在主视图中使用MaterialButton进行了测试。我有点傻。我的上一个应用程序在main.js中为整个应用程序启动时,它才起作用,但看起来我现在必须为需要的每个组件导入、启动它。这意味着对整个插件的需求似乎正在消失,因为chrome和safari移动浏览器现在正确地支持onClick事件。只有运行旧版本浏览器的用户才需要它
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Header from './Header';
import Footer from './Footer';

class App extends React.Component {
  render() {
    return (
      <MuiThemeProvider>
        <div>
          <Header/>
          {this.props.children}
          <Footer/>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;
import React from 'react';
import { IndexRoute, Route } from 'react-router';
import App from './components/App';
import Home from './components/Home';
import Contact from './components/Contact';
import NotFound from './components/NotFound';
import Login from './components/Account/Login';
import Signup from './components/Account/Signup';
import Profile from './components/Account/Profile';
import Forgot from './components/Account/Forgot';
import Reset from './components/Account/Reset';

export default function getRoutes(store) {
  const ensureAuthenticated = (nextState, replace) => {
    if (!store.getState().auth.token) {
      replace('/login');
    }
  };
  const skipIfAuthenticated = (nextState, replace) => {
    if (store.getState().auth.token) {
      replace('/');
    }
  };
  const clearMessages = () => {
    store.dispatch({
      type: 'CLEAR_MESSAGES'
    });
  };
  return (
    <Route path="/" component={App}>
      <IndexRoute component={Home} onLeave={clearMessages}/>
      <Route path="/contact" component={Contact} onLeave={clearMessages}/>
      <Route path="/login" component={Login} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="/signup" component={Signup} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="/account" component={Profile} onEnter={ensureAuthenticated} onLeave={clearMessages}/>
      <Route path="/forgot" component={Forgot} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path='/reset/:token' component={Reset} onEnter={skipIfAuthenticated} onLeave={clearMessages}/>
      <Route path="*" component={NotFound} onLeave={clearMessages}/>
    </Route>
  );
}
import injectTapEventPlugin from 'react-tap-event-plugin'; 
injectTapEventPlugin();