मैं एक अजीब परिस्थिति में अपने सिर को एक दीवार में चलाने के लिए रिएक्ट कॉन्टेक्स्ट एपीआई का उपयोग करके यूजरेड्यूसर और यूज कॉन्टेक्स्ट हुक के साथ चला रहा हूं।

यहाँ मेरा मुख्य स्टोर है।

import React, { createContext, useReducer } from 'react';
import { Reducers } from './Reducers';
import { surveys } from '../../testData.json';

export const context = createContext();
const { Provider } = context;

export const Store = ({ children }) => {
  const [store, dispatch] = useReducer(Reducers, {
    editSurvey: { display: false },
    surveys,
  });
  return <Provider value={{ store, dispatch }}>{children}</Provider>;
};

यहां मेरा रेड्यूसर फ़ंक्शन और मेरे एक्शन प्रकार हैं:

import { Actions } from './Actions';
const { DISPLAY_NEW_SURVEY, HIDE_SURVEY } = Actions;
export const Reducers = (state, action) => {
  const { type, payload } = action;
  console.log(state, action);
  switch (type) {
    case DISPLAY_NEW_SURVEY:
      return { ...state, editSurvey: { display: true } };
    case HIDE_SURVEY:
      return { ...state, editSurvey: { display: false } };
    default:
      return state;
  }
};
export const Actions = {
  DISPLAY_NEW_SURVEY: 'DISPLAY_NEW_SURVEY',
  HIDE_SURVEY: 'HIDE_SURVEY',
};

मेरे पास मेरी संपादन संपत्ति के अंदर एक प्रदर्शन संपत्ति है जिसका उपयोग प्रतिक्रिया पोर्टल को सशर्त रूप से प्रस्तुत करने के लिए किया जाता है, नीचे देखें:

import React, { useContext } from 'react';
import { EditSurveyPortal } from '../EditSurvey/EditSurveyPortal';
import { context } from '../../store/Store';

export const NavItem = ({ name, NavImage }) => {
  const { dispatch } = useContext(context);
  return (
    <div
      id={name}
      style={{ cursor: 'pointer' }}
      onClick={() => {
        dispatch({ type: 'DISPLAY_NEW_SURVEY' });
      }}
    >
      <NavImage alt={name} width={10} height={10} />
      <EditSurveyPortal />
    </div>
  );
};
import React, { useContext } from 'react';
import { createPortal } from 'react-dom';
import { context } from '../../store/Store';
import { EditSurvey } from './EditSurvey';

export const EditSurveyPortal = () => {
  const {
    store: {
      editSurvey: { display },
    },
    dispatch,
  } = useContext(context);
  return display
    ? createPortal(
        <div className="absolute top-0 left-0 w-screen h-screen z-10 flex justify-center items-center bg-gray-400 bg-opacity-50">
          <EditSurvey />
        </div>,
        document.getElementById('root'),
      )
    : null;
};

और यहाँ वास्तविक संपादन सर्वेक्षण घटक है:

import React from 'react';
import { Card, CardHeader } from '../Utility/Card';
import { Close } from '../Images/Close';

export const EditSurvey = ({ dispatch }) => {
  return (
    <Card>
      <CardHeader className="flex justify-between align-center">
        <div className="inline-block relative rounded">
          <span className="absolute top-0 l-0 bg-gray-200 text-gray-800 rounded-l px-2 py-1">
            Title
          </span>
          <input type="text" className="rounded p-1" />
        </div>
        <div
          className="text-gray-800"
          style={{ cursor: 'pointer' }}
          onClick={() => {
            dispatch({ type: 'HIDE_SURVEY' });
          }}
        >
          <Close width={8} height={8} />
        </div>
      </CardHeader>
    </Card>
  );
};

मेरी समस्या यह है कि जब मैं पोर्टल पर बंद करें बटन पर क्लिक करता हूं, तो यह HIDE_SURVEY भेजता है और फिर तुरंत DISPLAY_NEW_SURVEY भेजता है:

Screenshot of Page

मैं अपने जीवन के लिए यह पता नहीं लगा सकता। किसी भी तरह की सहायता का स्वागत किया जाएगा।

धन्यवाद!

0
Graham Vasquez 3 सितंबर 2020, 18:10

1 उत्तर

सबसे बढ़िया उत्तर

घटना बबलिंग, दोस्त।

यहाँ समस्या यह है कि आपका EditSurvey, NavItem के क्लिक करने योग्य क्षेत्र के नीचे है। यहाँ जो हो रहा है वह यह है कि जब आपने अपने EditSurvey में उस डिव पर क्लिक किया, तो यह पहले उस डिव पर क्लिक को पंजीकृत करता है और फिर आपके NavItem क्लिक करने योग्य div तक बबल करता है। इसे मूल रूप से event-bubbling कहा जाता है

आप इवेंट बबलिंग और कैप्चरिंग के बारे में जान सकते हैं यहां

साथ ही, आप इवेंट बबलिंग समस्या यहां भी देख सकते हैं

घटना को बुदबुदाने से रोकने के लिए, आप बस घटना के प्रसार को रोक सकते हैं।

<div
    className="text-gray-800"
    style={{ cursor: 'pointer' }}
    onClick={(event) => {
      event.stopPropagation();
      dispatch({ type: 'HIDE_SURVEY' });
    }}
  >
    <Close width={8} height={8} />
  </div>
1
Prateek Thapa 3 सितंबर 2020, 19:46