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