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 quot -tap-event-plugin 问题 tap Material-UI 事件      更新时间:2023-09-26

在移动设备上面对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的顶层。