React - UI 点击没有响应

Question

问题是在某些更改（例如注销和登录）之后，点击开始响应速度变慢或根本没有响应。这在本地和生产中都会发生。我不知道为什么会这样，也不知道是什么导致了这个奇怪的问题..

在出现这个问题之前，我可以多次点击复选框或点击更改照片等

问题后，我无法重复点击复选框，也无法点击更改照片。

下面是项目的一些代码：

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
import { createBrowserHistory } from 'history';
import configureStore from './store/configureStore';

// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') as string;
export const history = createBrowserHistory({ basename: baseUrl });

const store = configureStore(history);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

App.tsx

import React, { useEffect } from 'react';
import './App.css';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { DndProvider } from 'react-dnd';

import { ConnectedRouter } from 'connected-react-router';
import Routes from './routes/Routes';
import { history } from './store';
import Layout from './components/main/Layout';
import ToastrNotification from './components/shared/ToastrNotification';
import { localizationConfig } from './config/localizationConfig';

function App() {
    localizationConfig();
    return (
        <DndProvider backend={HTML5Backend}>
            <ConnectedRouter history={history}>
                <Layout>
                    <ToastrNotification />
                    <Routes />
                </Layout>
            </ConnectedRouter>
        </DndProvider>
    );
}

export default App;

package.json

{
    "name": "xxx",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@date-io/date-fns": "^1.3.13",
        "@date-io/moment": "^2.11.0",
        "@material-ui/core": "^4.11.3",
        "@material-ui/icons": "^4.11.2",
        "@material-ui/lab": "^4.0.0-alpha.57",
        "@material-ui/pickers": "^3.3.10",
        "@reduxjs/toolkit": "^1.5.0",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "@types/jest": "^24.9.1",
        "@types/node": "^12.20.4",
        "@types/react": "^16.14.4",
        "@types/react-dnd": "^3.0.2",
        "@types/react-dom": "^16.9.11",
        "@types/react-highlight-words": "^0.16.3",
        "@types/react-redux": "^7.1.16",
        "axios": "^0.21.1",
        "bson-objectid": "^2.0.1",
        "chart.js": "^3.6.2",
        "connected-react-router": "^6.9.1",
        "date-fns": "^2.24.0",
        "faker": "^5.5.3",
        "formik": "^2.2.6",
        "formik-material-ui": "^3.0.1",
        "formik-material-ui-pickers": "0.0.12",
        "history": "^4.10.1",
        "html2canvas": "^1.3.3",
        "i18n-js": "^3.8.0",
        "iban": "^0.0.14",
        "material-ui-popup-state": "^1.8.0",
        "moment": "^2.29.1",
        "oidc-client": "^1.11.5",
        "qrcode.react": "^1.0.1",
        "react": "^17.0.1",
        "react-chartjs-2": "^4.0.0",
        "react-datepicker": "^4.5.0",
        "react-dnd": "^15.1.1",
        "react-dnd-html5-backend": "^15.1.2",
        "react-dom": "^17.0.1",
        "react-highlight-words": "^0.17.0",
        "react-moment": "^1.1.1",
        "react-number-format": "^4.5.0",
        "react-oidc-client": "^1.0.13",
        "react-phone-number-input": "^3.1.38",
        "react-qrcode-logo": "^2.5.0",
        "react-redux": "^7.2.2",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "react-spinners": "^0.10.6",
        "react-toastify": "^7.0.3",
        "redux-oidc": "^4.0.0-beta1",
        "redux-thunk": "^2.3.0",
        "typescript": "^3.9.9",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@types/i18n-js": "^3.8.0",
        "@types/react-datepicker": "^3.1.8",
        "@types/react-router-dom": "^5.1.7",
        "prettier": "2.3.0"
    }
}

Answer 1

好的，答案很简单也很奇怪。我们在某个组件中有一段代码，它向文档的主体添加了 click EventListener。

After removing the e.preventDefault(), problem is solved..

useEffect(() => {
    document.body.addEventListener('click', (e) => handleClick(e));
    return () => {
        document.body.addEventListener('click', (e) => handleClick(e));
    };
}, []);



function handleClick(e: any) {
        e.stopPropagation();
        e.preventDefault();
        e.target.slot !== 'status-container' && isOpen() && setShowSelect(false);
    }

React - UI 点击没有响应

React - UI Clicks are not responsive

javascript

web

reactjs