Как добавить радиокнопку и ссылку для оповещения React? - PullRequest
Новая
       37

Как добавить радиокнопку и ссылку для оповещения React?

0 голосов
/ 13 февраля 2020

Использование React js. введите описание изображения здесь

1. Это мой файл AlertView.tsx 

import * as React from 'react';
import { Context } from '../../context/Context';

class AlertView extends React.Component {

    render() {
        return (
            <div>
                <div className="ng-content flex-container alertWrapper" style={{ display: this.context.alertMessage.display ? 'inherit' : 'none' }}>
                    <div className="alertBox">
                        <h3 className="h3-rewrite">{this.context.alertMessage.title ? this.context.alertMessage.title : ""}</h3>
                        <p>
                            {this.context.alertMessage.message ? this.context.alertMessage.message: ""}
                        </p>

                        <button className="buttonRect" onClick={ () => {
                            this.context.alertMessage.okCallback && this.context.alertMessage.okCallback()
                            this.context.setAlertMessage(undefined, undefined, undefined, false)
                        } }>
                            OK
                        </button>
                        {this.context.alertMessage.okCallback ?
                            <button className="buttonRect back" onClick={ () => {
                                this.context.setAlertMessage(undefined, undefined, undefined, false)
                            } }>
                                Abbrechen
                            </button> : null
                        }
                    </div>
                </div>
                {this.props.children}
            </div>
        )
    }
}

export default AlertView;
AlertView.contextType = Context

2. Файл Context.tsx 

import * as React from 'react';

export const USER_TYPE = {
    GUEST: "GUEST",
    USER: "USER",
}

export const Context = React.createContext({
    user: undefined,
    type: USER_TYPE.GUEST,
    language: "de",
    access_token: "",
    alertMessage: {
        title: undefined,
        message: undefined,
        okCallback: () => {},
        display: false
    },
    setUser: (user: object, type: string, access_token: string) => {},
    setLanguage: (countryCode: string) => {},
    setAlertMessage: (title: string, message: string,okCallback: () => void, display: boolean) => {},
})

3. Оповещение для componentDidMount () 

loadSite1() {
    this.context.setAlertMessage(Localizer.get("ALERT_LOADSITE_TITLE"), Localizer.get("ALERT_LOADSITE_MESSAGE"),() => {       } ,true)
    }

    componentDidMount(){
        this.loadSite1() 
  }
...