We Keep Coding

Radio Button Misplaced in Form.Check - React bootstrap

So I've been trying to create a payment method wherein the user selects the desired payment method using radio buttons. Unfortunately, the button is somehow misplaced.
Here is my code:
<FormContainer>
<CheckoutSteps step1 step2 step3></CheckoutSteps>
<h1>Payment Method</h1>
<Form onSubmit={submitHandler}>
<Form.Group>
<Form.Label as='legend'>Select Method</Form.Label>
</Form.Group>
<Col>
<Form.Check
type='radio'
label='PayPal or Credit Card'
id='PayPal'
name='paymentMethod'
value='PayPal'
onChange={(e) => setPaymentMethod(e.target.value)}
></Form.Check>
<Form.Check
type='radio'
label='Stripe'
id='Stripe'
name='paymentMethod'
value='Stripe'
onChange={(e) => setPaymentMethod(e.target.value)}
></Form.Check>
</Col>
<br></br>
<Button type='submit' variant='primary'>
Continue
</Button>
</Form>
</FormContainer>
</>
Here is the output:
The button appears on the rightmost side. Using react-bootstrap 2.5

please change your id to be the same value
instead of id='Stripe' id='PayPal'
use id=myradio

Update: Solved it by removing
as='legend'
in the Form.Label

React final form - submit a wizard form on click of a radio button

I would like to submit a step of wizard form on click of radio button instead of classic submit button.
Radio component :
const Radio = ({ input, children }) => (
<label className="form-radio city">
<input {...input} />
<span className="radio-text">{children}</span>
</label>
)
My class :
<ProfileForm.Page>
{CITIES.map(({ name }) => (
<Field component={Radio} type="radio" name="city" key={name} value={name}>
{name}
</Field>
))}
<button type="submit"></button>
</ProfileForm.Page>
This worked when I use the submit button but I want to remove it and submit city directly on click on the radio button.

I tried to had an onChange event with "this.form.submit()" but I cannot acced to "form".
I have a parent component ProfileForm.jsx with :
<Form validate={this.validate} onSubmit={this.handleSubmit} initialValues={values}>
{({ handleSubmit, invalid, pristine, values }) => (
<form onSubmit={handleSubmit}>
{activePage}
</form>
)}
</Form>
and my radio buttons are on the "active page" City.jsx with the code of my first post

Formik onSubmit not registered within modal

I trying to do formik within Modal itself, however, onSubmit button doesn't registered with. The alert function alert("test"); should appear. Do I need to input the onChange event inside the phone div?
.
.
<Modal
show={this.state.testing}
onHide={this.onHide}
size="lg"
aria-labelledby="contained-modal-title-vcenter"
centered
>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Hello World
</Modal.Title>
</Modal.Header>
<Formik
onSubmit={({phone},{ setStatus, setSubmitting }) => {
alert("test");
)
render={({ errors, status, touched, isSubmitting }) => (
<Form>
<div className="form-group">
<label htmlFor="phone">phone</label>
<Field
name="phone"
type="text"
className={
"form-control" +
(errors.phone&& touched.phone? " is-invalid" : "")
}
/>
.
.
.
<button
type="submit"
className="btn btn-primary"
disabled={isSubmitting}
>Update</button>
Alert("test")

When you are using the Field component, formik handles input with the onChange event automatically for you. So you don't need to change that.
Please consider these two notes:
Form component should be imported from formik like this:
import { Form } from 'formik';
and your button should be inside it. something like this:
<Form>
.
.
.
<button
type="submit"
className="btn btn-primary"
disabled={isSubmitting}
>Update</button>
</Form>
if you still couldn't get the job done with these notes please share more of your code so i can help you.
please let me know if you still have any problem

React - Draggable components with inputs lose the ability to focus when clicking that input

<Draggable axis="y"
grid={[135,135]}
onStop={this.handleStop}
defaultPosition={{x: this.props.task.positionX, y: this.props.task.positionY,}}>
<div id="edit-task-component">
<form onSubmit={this.handleSubmit} id="edit-task-form" className="edit-task-form">
<input type="text" name="name" onChange={this.handleChange} placeholder="Name" value={this.state.name} required/>
<input type="text" name="description" onChange={this.handleChange} placeholder="Description" value={this.state.description} required/>
<button className="btn submit-btn" type="submit">Save </button>
</form>
</div>
</Draggable>
What happens is I will click on the input and it will focus for a split second then loses focus -- so i cant type in the input. I have to click on it a few times for it to actually focus, therefore allowing me to type in the input. How can I get it to stay focused after clicking once? I have tried setting autofocus to true after clicking the input but that didnt work either. Any ideas ?

Use enableUserSelectHack, this will not interfere with existing style
eg <Draggable enableUserSelectHack={false}>
Use cancel prop
eg: give any class name, it doesn't matter
<Draggable cancel=".just-name">
<input className="just-name" placeholder="Add text here" />
</Draggable>

Via a handle to enable drag is better and you can also avoid this kind of issue easily.
Here is the demo given by the official doc:
return (
<Draggable
axis="x"
handle=".handle"
start={{x: 0, y: 0}}
grid={[25, 25]}
zIndex={100}
onStart={this.handleStart}
onDrag={this.handleDrag}
onStop={this.handleStop}>
<div>
<div className="handle">Drag from here</div>
<div>This readme is really dragging on...</div>
</div>
</Draggable>
);
check its doc
the handle here is a CSS selector

Submit Form using Button in Parent Component in React

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>

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' />

What does your makeActivityInfoUpdateHandler function look like?
I assume you did it by the following way, and just continue adding more code to make it work for you:
1/ Add ref to your Form, then you can access the Form in the parent (Modal):
<Modal>
<Modal.Content>
<ActivityInfoForm ref="activityForm" />
</Modal.Content>
</Modal>
2/ Then in the makeActivityInfoUpdateHandler function:
makeActivityInfoUpdateHandler = (activityId) => {
// ...
this.refs.activityForm.getWrappedInstance().submit();
// ...
}
The above code is the way you should do, please post here some more details in case this doesn't work yet!
===========
EDITED VERSION BELOW: (after discussion with the author, and we together found a good way around!):
The idea now is put the ref on a button (this button has type="submit", and it belongs to the form), then when the button outside is clicked, we just need to call the "click()" function of the ref button [which is a smart thinking from the author himself]
(Actually, component from semantic-ui is a modified and improved version, no longer the standard form, so my previous way above may not work when it tries to submit the form, however, the below way will work)
The code will now look like:
1/ Add ref to the button on the form:
<Form onSubmit={ this.handleSubmit} >
<button style={{}} type='submit' ref={ (button) => { this.activityFormButton = button } } >Submit</button>
</Form>
2/ Then in the makeActivityInfoUpdateHandler function, trigger click() of the above button:
makeActivityInfoUpdateHandler = (activityId) => {
// ...
this.activityFormButton.click();
// ...
}

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");
}