다른 .js 파일에서 알림 표시 줄에 문제가 있음

Question

현재 React를 배우는 중이므로 현재 작업하고있는 새 웹 사이트 프로젝트를 시작했습니다. 반응 알림 (https://www.npmjs.com/package/react-notifications)을 다운로드했으며 필요한 항목을 가져 와서 NotificationContainer를 설정하여 내 등록 페이지에서 작업하도록했습니다.

그러나 현재 다른 등록 .js 파일에 등록 스크립트를 저장하고 있으며 지금 제출 된 양식이 비어 있지 않고 암호가 서로 일치하는지 확인하는 것 외에는 아무것도 수행하지 않습니다. 하지만 알림 바를 보여주는 const를 호출하려고하면 아무 일도 일어나지 않습니다. 메인 페이지의 이벤트에서 알림 표시 줄을 'onClick', 'onSubmit'등을 통해서만 프롬프트 할 수있는 것 같습니다. 지금까지 내 코드가 있습니다. 누군가가이 문제를 해결하는 방법을 알 수 있기를 바랬습니다. 왜 그렇게/작동하지 않습니다. 모든 양식 데이터가 성공적으로 닫혀 있지만 알림 표시 줄은 표시되지 않습니다.

내 onSubmit에서 createNotification을 호출하면 문제없이 작동합니다.

Register.js :

import { createNotification } from '../notifications/Notifications'; 
import { checkRegistration } from './RegisterFieldAuthentication'; 

    //Form submit 
    <form onSubmit={this.performRegistrationCheck}> 


    //PerformRegistrationCheck Function 
    performRegistrationCheck = (e) => { 
      e.preventDefault(); 

      let submittedBrandname = e.target.elements.brand.value; 
      let submittedEmail = e.target.elements.emailaddress.value; 
      let submittedPassword = e.target.elements.firstpassword.value; 
      let submittedRetypePassword = e.target.elements.secondpassword.value; 
      let wasChecked = e.target.elements.accepted.checked; 

    //CheckRegistration function that I have imported from Notifications.js 
      checkRegistration(submittedBrandname, submittedEmail, submittedPassword, submittedRetypePassword, wasChecked); 

     } 

Notifcations.js :

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {NotificationContainer, NotificationManager} from 'react-notifications'; 

export const createNotification = (type) => { 
    return() => { 
     switch (type) { 
     case 'info': 
      NotificationManager.info('Info message'); 
      break; 
     case 'success': 
      NotificationManager.success('Success message', 'Title here'); 
      break; 
     case 'warning': 
      NotificationManager.warning('Warning message', 'Close after 3000ms', 3000); 
      break; 
     case 'fill-all-fields-error': 
      NotificationManager.error('Please fill in all the fields.', 'Error', 5000); 
      break; 
     } 
    }; 

} 

RegisterAuthentication : 사전에

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {NotificationContainer, NotificationManager} from 'react-notifications'; 
import { createNotification } from '../notifications/Notifications'; 

export const checkRegistration = (brandName, emailAddress, password, retypePassword, checked) => { 

    console.log(brandName); 
    console.log(emailAddress); 
    console.log(password); 
    console.log(retypePassword); 
    createNotification('fill-all-fields-error'); 

} 

감사합니다!

Answer 1

createNotification()은 호출 할 수있는 함수를 반환하여 type 알림을 인수로 사용합니다. RegisterAuthentication 파일에서 가장 할 수있는 일은 다음과 같습니다.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {NotificationContainer, NotificationManager} from 'react-notifications'; 
import { createNotification } from '../notifications/Notifications'; 

const createFillAllFieldsError = createNotification('fill-all-fields-error'); 

export const checkRegistration = (brandName, emailAddress, password, retypePassword, checked) => { 

    console.log(brandName); 
    console.log(emailAddress); 
    console.log(password); 
    console.log(retypePassword); 

    createFillAllFieldsError(); 
}