React/MaterialUI ConfirmDialog

[Verwijderd]

Voor mijn opdrachtgever ben ik bezig om een website om te zetten van een server side oplossing naar een react frontend.

Ik heb een react component gemaakt met de naam ConfirmDialog. Dit wordt dan een weet u het zeker dialog.

code:

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';

class ConfirmDialog extends React.Component {

    state = {
        showDialog: false
    };

    handleOpen = () => {
        this.setState({showDialog: true});
    };

    handleClose = () => {
        this.setState({showDialog: false});
    };

    handleOK = () => {
        alert('handleOk');
    };

    handleCancel = () => {
        this.handleClose();
    };

    standardActions = [
        <FlatButton
            label={this.props.cancelBtnText}
            primary={true}
            onTouchTap={this.handleCancel}
        />,
        <FlatButton
            label={this.props.okBtnText}
            primary={true}
            keyboardFocused={true}
            onTouchTap={this.handleOK}
        />,
    ];

    render() {
        return (
            <div>
                <RaisedButton label={this.props.openBtnText} onTouchTap={this.handleOpen} />
                <Dialog
                    title={this.props.titleText}
                    actions={this.standardActions}
                    modal={true}
                    open={this.state.showDialog}
                    onRequestClose={this.handleClose}
                >
                    {this.props.messageText}
                </Dialog>
            </div>
        );
    }
}

ConfirmDialog.defaultProps = {
    cancelBtnText: 'Annuleren',
    okBtnText: 'Doorgaan',
    messageText: 'Wilt u doorgaan?',
    titleText: 'Weet u het zeker?',
    openBtnText: 'Bevestigen'
};

export default ConfirmDialog;

Dit werkt echter ik kan deze component niet extenden. Ik zie 2 mogelijkheden echter beide willen niet,

1. Ik kan de ConfirmDialog extenden op de volgende manier echter die werkt niet omdat in COnfirmDialog worden de methodes met this.methodeNaam aangeroepen en dan wordt de handleOK in de sub class niet aangeroepen.

code:

class UserAccountDeleteConfirmDialog extends ConfirmDialog {

  // Override handleOK methode

}

2. Ik kan een component maken die de confirmDialog terug geeft in de render methode echter dan kan ik de actions niet overschrijven:

code:

class UserAccountDeleteConfirmDialog extends React.Component {

    render() {
        return (
            <ConfirmDialog messageText="Weet u zeker dat u deze gebruiker wilt verwijderen" openBtnText="Verwijderen" cancelBtnText="Annuleren" okBtnText="Doorgaan" titleText="Weet u het zeker?" />
        )
    }

}

Ik werk vooral in Java en dan is React een hele onduidelijke onoverzichtelijke iets. Ik wil een component kunnen extenden zodat die component op het scherm verschijnt. Hoe doe ik dat?

[q-enf0rcer.1]

Je kunt hier eens kijken voor de mogelijkheden:

https://developer.mozilla...Sub_classing_with_extends

Ik ben geen React kenner, maar in de documentatie van React wordt verwezen naar deze pagina, ik denk daarom dat de implementatie verder hetzelfde is.

Paar dingen die mij potentiële alarmbellen doen rinkelen:


'If there is a constructor present in sub-class, it needs to first call super() before using "this".'

en

'Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use Object.setPrototypeOf():'

Wellicht is het het ook waard om eens je code te testen zonder React, kijken of het dan wel werkt.

[ Voor 7% gewijzigd door q-enf0rcer.1 op 12-04-2017 16:12 ]