Code Monkey home page Code Monkey logo

Comments (7)

tbleckert avatar tbleckert commented on May 10, 2024 1

Almost correct. The problem is that you need to create the component (you're only passing the reference), either with JSX or React.createElement(...). Like this:

Popup.create({
    title     : 'title',
    content   : <PopupFields />,
    className : 'prompt'
});

from react-popup.

RoelantM avatar RoelantM commented on May 10, 2024

noobie error! thnx!!

oke, last question then.... Then I will never bother you again.. I promise...

how can I access my input-fields in the


action: function (Box) {
Box.value is empty
}

so my code is:

start = moment(new Date()).format(localDateTimeFormat);
        stop = moment(new Date()).add(3, 'hour').format(localDateTimeFormat);

        ReactDom.render(
            <Popup id={this.props.id} programsStore={this.props.programsStore} />,
            document.getElementById('popupContainer')
        );

        Popup.create({
            title: 'test',
            content: <ScheduleForm start={start} stop={stop} />,
            className: 'prompt',
            buttons: {
                left: [{
                    text: 'Annuleer',
                    action: function (Box) {
                        Box.close();
                    }
                }],
                right: [{
                    text: 'Save',
                    className: 'success',
                    action: function (Box, start, stop) {
                        console.log(Box);
                        console.log(Box.value);
                        console.log(start, stop);
                        //var datetime = Box.value === null ? now : Box.value;
                        //Popup.alert('TO DO.');
                        //TODO
                        Box.close();
                }}],
            }
        });

and scheduleForm:

render() {
        return (
            <div>
                <p>test1?</p>
                <input type="text" id="start" defaultValue={this.props.start} className="mm-popup__input"/>
                <br />
                <p>test2?</p>
                <input type="text" id="stop" defaultValue={this.props.stop} className="mm-popup__input"/>
            </div>
        );
    }

any help would greatly appriciated!

from react-popup.

tbleckert avatar tbleckert commented on May 10, 2024

Hehe no problem at all, I'm just happy to help.

This one is a bit more tricky. I'm not sure there's a good way to solve it from the popup component. The best way imo is to have a callback function on the content component that is called when values are updated and store it somewhere.

Maybe we should add functionality so you can access the content component state in an easy way. But for now I think this is a good workaround.

Popup.create({
        title: 'test',
        content: <ScheduleForm onChange={(value) => this.setState({value: value})} />
});

// then use this.state.value in your action callback

Of course, if this is outside a component you would use a global variable instead of the state object. Then you can also have a callback on cancel that resets this variable.

from react-popup.

RoelantM avatar RoelantM commented on May 10, 2024

from react-popup.

tbleckert avatar tbleckert commented on May 10, 2024

You need to call the onChange function from your ScheduleForm component. Whenever the value has changed inside the component you call this.props.onChange(value).

from react-popup.

RoelantM avatar RoelantM commented on May 10, 2024

perfect!

now I got:

_onClick() {
        ReactDom.render(
            <Popup id={this.props.id} programsStore={this.props.programsStore} />,
            document.getElementById('popupContainer')
        );

        var start;
        var stop;

        Popup.create({
            title: 'schedule',
            content: <ScheduleForm onChange={(type, value) => this.handleChange(start, stop, type, value)} />,
            className: 'prompt',
            buttons: {
                left: [{
                    text: 'cancel',
                    action: function (Box) {
                        Box.close();
                    }
                }],
                right: [{
                    text: 'save',
                    className: 'success',
                    action: function (Box) {
                        this.props.programsStore.schedule(this.props.id, start, stop);
                        Popup.alert('Works live a charm!.');
                        Box.close();
                }}],
            }
        });
    }

 handleChange(start, stop, type, value){
        if (type === 'start'){
            start = value;
        } else if (type === 'stop'){
            stop = value;
         }
    }

and in my component

export default class ScheduleForm extends Component {
    render() {

        var start = moment().format(localDateTimeFormat);
        var stop = moment().add(3, 'hour').format(localDateTimeFormat);

        return (
            <div>
                <p>blablabla</p>
                <input type="text" id="start" defaultValue={start} onChange={event => this.props.onChange('start', event.target.value)} className="mm-popup__input"/>
                <br />
                <p>blabla</p>
                <input type="text" id="stop" defaultValue={stop} onChange={event => this.props.onChange('stop', event.target.value)} className="mm-popup__input"/>
            </div>
        );
    }
}

posting it for someone that finds it usefull.

thnx for the help!

from react-popup.

tbleckert avatar tbleckert commented on May 10, 2024

Great! :)

from react-popup.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.