Thursday, 18 May 2017

Submit Form using Button in Parent Component in React

form modal

So I have to implement a form in modal, as you can see, the button in the modal are not the buttons in the form. I created the form as a child component of the modal. How can I submit the form using the button in the parent component. I am using Semantic-UI react as my UI framework. https://react.semantic-ui.com/collections/form#form-example-capture-values

I am think if I can hide the button in the form and trigger it using JavaScript. I think this might be achieved via getElementById, but is there a react way of doing it?

My current Modal looks like this:

<Modal open={this.props.open} onClose={ this.props.onClose } size="small" dimmer={"blurring"}>
    <Modal.Header> Edit Activity {this.props.name } </Modal.Header>
    <Modal.Content>
        <ActivityInfoForm/>

    </Modal.Content>
    <Modal.Actions>
        <Button negative onClick={ this.props.onClose }>
            Cancel
        </Button>
        <Button positive
                content='Submit'
                onClick={ this.makeActivityInfoUpdateHandler(this.props.activityId) }/>
    </Modal.Actions>
</Modal>

My form code looks like this:

<Form>
    <Form.Group widths='equal'>
        <Form.Input label='Activity Name' placeholder='eg. CIS 422' />
        <Form.Input label='Activity End Date' placeholder='Pick a Date' />
    </Form.Group>
    <Form.Group widths='equal'>
        <Form.Input label='Total Capacity' placeholder='eg. 30' />
        <Form.Input label='Team Capacity' placeholder='eg. 3' />
    </Form.Group>
</Form>



via Rui

No comments:

Post a Comment