Submit Form using Button in Parent Component in React

user_3216825 0
Viewed 16883

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 React Semantic-UI react as my UI framework.

I 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>
reactjs web node.js html javascript
3 Answers

The simplest solution would be to use HTML form Attribute

Add "id" attribute to your form: id='my-form'

<Form id='my-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>

Add the appropriate "form" attribute to the needed button outside of the form: form='my-form'

<Button positive form='my-form' content='Submit' value='Submit'  />
user_24241270

The selected answer was useful. But the method in it doesn't seem to work any longer. Here's how I went about it.

You can give a ref to the child component when it is being created.

<ChildComponent ref={this.childComponent}/>

And use it in the button's onClick method. (This is the code for the button)

<Button variant= "light" onClick={this.onClick}>  
    Submit
</Button>

(This is the onClick method)

onClick = (event) => {
    this.childComponent.current.handleSubmit(event);
}

I'm calling a method in the child component called handleSubmit. It can look like this.

handleSubmit = (event)=> {
    event.preventDefault();

    //Your code here. For example,
    alert("Form submitted");  
}
user_119098040
Related