React Material-UI tap事件问题使用时使用" React -tap-event-plugin
React Material-UI tap event issues using while using "react-tap-event-plugin": "^1.0.0"
在移动设备上面对React Tab事件的问题。我在下面得到一个错误。我的主要问题是,我不确定我是否还应该使用react-tao-event-plugin,或者是否有一些react native方法来处理这个问题?
我已经将"react-tap-event-plugin": "^1.0.0"
安装为npm包。我也调用tap事件似乎我的,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
Main.js——>
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router';
import injectTapEventPlugin from 'react-tap-event-plugin';
import configureStore from './store/configureStore';
import getRoutes from './routes';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
const store = configureStore(window.INITIAL_STATE);
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} routes={getRoutes(store)}/>
</Provider>,
document.getElementById('app')
);
App.js ->
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;
Routes.js——>
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();
,而不是在main.js
的顶层。
相关文章:
- React重新渲染但未显示正确的组件
- React组件等待所需道具进行渲染
- React中的数据集表示
- Webpack开发服务器和React服务器端渲染
- 铬:“;未捕获的语法错误:意外的标记:"
- 可以设置“;文件名"发生错误时显示的内联脚本标记的
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- React Redux错误页面管理
- 检测电话窃听,即:<a href="电话:xxx">在UIWebview上
- react.js中的密钥绑定
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React:按键的性能提升
- 如何在react js中从一个页面导航到另一个页面
- "锻造;React中的表达式
- React:独一无二的"键“;道具
- "如果“;不会't在React's组件WillMount()
- "无法读取属性'findDOMNode'未定义的“;当使用React小部件时
- "React”;以ReactJS的方式
- & lt;脚本src =“X"祝辞& lt; / script>内部返回渲染| React