Question

我目前正在学习React，因此我开始了一个我正在研究的新网站项目。我已经下载了react-notifications（https://www.npmjs.com/package/react-notifications），我通过导入必要的东西并设置NotificationContainer来使我的注册页面工作。

但是，我目前正将我的注册脚本存储在另一个.js文件中，此时除了检查提交的表单是否为空白以及密码是否相互匹配之外，它还没有做任何事情。但是，当我尝试调用显示通知栏的const时 - 没有任何反应。我似乎只能通过“onClick＆＃39;”，“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();
}

通过显示另一个.js文件

1 个答案: