because react-router v4 can't use 'browserHistory' then what should i do? if i want go to next page after summit form. here is my code
let Profile = ({ history, handleSubmit }) => {
return (
<FirstSec>
<div>
<p>Profile</p>
<form onSubmit={handleSubmit(submit)} >
<div className="form-group">
<Field name="firstName" type="text" className="form-control" label="first name" component={renderField} />
<Field name="lastName" type="text" className="form-control" label="last name" component={renderField} />
<Field name="tel" type="tel" className="form-control" label="tel" component={renderField} />
<Field name="email" type="email" className="form-control" label="email" component={renderField} />
</div>
<button onClick={() => history.push('/apply/1/Occupation')}>Back</button>
<button type="submit">Next</button>
</form>
</div>
</FirstSec>
);
};
Profile = reduxForm({
form: 'profile'
})(Profile);
You should use React-redux-router for it.
Related
I'm making a form which accepts some details & can only be accessed when you are logged in.
Here is a video to the problem i have faced. Please help me where i am going wrong. The form works perfectly for mobile view but not for normal web view. I think so there is something wrong with the my state management.
https://drive.google.com/file/d/1YAEPXTe8dZdR0xcKFhSDPqDLIkLDVQTt/view?usp=share_link
<form className='login-form addAdmin'>
<h1>Add Health Partner</h1>
<input
type="text"
placeholder="Full Name"
onChange={e => setName(e.target.value)}
required
/>
<input
type="email"
placeholder="Email"
onChange={e => setEmail(e.target.value)}
required
/>
<input
type="number"
placeholder="Mobile number"
onChange={e => setNumber(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
onChange={e => setPassword(e.target.value)}
required
/>
<input
type="text"
placeholder="Address"
onChange={e => setAddress(e.target.value)}
required
/>
<input
type="text"
placeholder="Specialization"
onChange={e => setSpecialization(e.target.value)}
required
/>
<input
type="text"
placeholder="Experience"
onChange={e => setExperience(e.target.value)}
required
/>
<button type='submit' onClick={e=>handleSubmit(e)}>
Add
</button>
</form>
Changes aren't retained after submitting and I get a 200 code. I test with postman and everything from middle to back end is running just fine. The issue is with my state not being updated for some reason. I am not understanding what I am missing.
const [formData, setFormData] = useState({
name: '',
menuItemId: '',
details: '',
maxQuantity: '',
specialCost: '',
isPublished: '',
isDeleted: '',
startDate: '',
endDate: '',
});
useEffect(() => {
setFormData({
...location.state.payload,
});
}, [location]);
const handleSubmit = (values) => {
_logger('handleSubmit', values);
if (values.id === null) {
menuItemSpecialService.insert(values).then(insertSuccess).catch(insertError);
} else {
menuItemSpecialService.update(values).then(insertSuccess).catch(insertError);
}
};
enableReinitialize={true}
initialValues={formData}
validationSchema={menuItemSpecialSchema}
onSubmit={handleSubmit}>
<Form>
<label htmlFor="name">Name</label>
<Field type="text" name="name" className="form-control" />
<label htmlFor="menuItemId">Menu Item Id</label>
<Field type="text" name="menuItemId" className="form-control" />
<label htmlFor="details">Details</label>
<Field type="text" name="details" className="form-control" />
<label htmlFor="maxQuantity">Max Quantity</label>
<Field type="text" name="maxQuantity" className="form-control" />
<label htmlFor="specialCost">Special Cost</label>
<Field type="text" name="specialCost" className="form-control" />
<label htmlFor="isPublished">Is Published</label>
<Field type="text" name="isPublished" className="form-control" />
<label htmlFor="isDeleted">Is Deleted</label>
<Field type="text" name="isDeleted" className="form-control" />
<label htmlFor="startDate">Start Date</label>
<Field type="text" name="startDate" className="form-control" />
<label htmlFor="endDate">End Date</label>
<Field type="text" name="endDate" className="form-control" />
<Button type="onSubmit" className="btn btn-primary menu-item-form-button">
);
}```
I am getting an error in my code of handleSubmit function because ,here I am using this syntax 'export const Register = ()',so what needs to be fixed in my code so that I;m able to use the handleSubmit function I'll paste the code down below it keeps saying its not defined ive tried adding function handleSubmit() and const handleSubmit = () but its still not working any help on how to resolve this error please as i've tried for hours now i'm new to react and wondering as how i would be able to resolve this error
export const Register = () => {
handleSubmit = e => {
e.preventDefault();
console.log('works!');
};
return (
<form onSubmit={this.handleSubmit} >
<h3>Sign Up</h3>
<div className="form-group">
<label> First Name</label>
<input type="text" className="form-control" placeholder="First Name" />
</div>
<div className="form-group">
<label> Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" />
</div>
<div className="form-group">
<label> Email</label>
<input type="email" className="form-control" placeholder="Email" />
</div>
<div className="form-group">
<label> Password</label>
<input type="password" className="form-control" placeholder="Password" />
</div>`
<div className="form-group">
<label> Confirm Password</label>
<input type="password" className="form-control" placeholder="Confirm Password" />
</div>`
<button className="btn btn-primary btn-block" > Sign Up</button>
</form >
);
}
export default Register;
When using the arrow function syntax, the function has to be declared with const. Make it like this:
const handleSubmit = e => {
e.preventDefault();
console.log('works!');
};
Also, you only need to export the Register component once. Using export default Register at the end is sufficient.
And we don't use this in a function component, it is just hadleSubmit:
<form onSubmit={handleSubmit} >
<h3>Sign Up</h3>
<div className="form-group">
<label> First Name</label>
<input type="text" className="form-control" placeholder="First Name" />
</div>
<div className="form-group">
<label> Last Name</label>
<input type="text" className="form-control" placeholder="Last Name" />
</div>
<div className="form-group">
<label> Email</label>
<input type="email" className="form-control" placeholder="Email" />
</div>
<div className="form-group">
<label> Password</label>
<input type="password" className="form-control" placeholder="Password" />
</div>`
<div className="form-group">
<label> Confirm Password</label>
<input type="password" className="form-control" placeholder="Confirm Password" />
</div>`
<button className="btn btn-primary btn-block" > Sign Up</button>
</form >
how would I specify in clear button, that i only need to reset the dropdown field and not everything else
import React from 'react'
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
let SelectingFormValuesForm = (props) => {
const {
favoriteColorValue, fullName, handleSubmit, hasEmailValue, pristine, reset, submitting
} = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component="input" type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component="input" type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label htmlFor="hasEmail">Has Email?</label>
<div>
<Field name="hasEmail" id="hasEmail" component="input" type="checkbox"/>
</div>
</div>
{hasEmailValue && <div>
<label>Email</label>
<div>
<Field name="email" component="input" type="email" placeholder="Email"/>
</div>
</div>}
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component="select">
<option></option>
<option value="#ff0000">Red</option>
<option value="#00ff00">Green</option>
<option value="#0000ff">Blue</option>
</Field>
</div>
</div>
{favoriteColorValue && <div style={{
height: 80,
width: 200,
margin: '10px auto',
backgroundColor: favoriteColorValue
}}/>}
<div>
<button type="submit" disabled={pristine || submitting}>Submit {fullName}</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values
</button>
</div>
</form>
)
}
https://redux-form.com/6.0.2/examples/selectingformvalues/
If you use refux-form version 6.0.2 You can update it to the latest and use clearFields (doc)
clearFields(form:String, keepTouched: boolean, persistentSubmitErrors: boolean, ...fields:String)
Cleans fields values for all the fields passed in. Will reset to initialValue for each field if has any.
If the keepTouched parameter is true, the values of currently touched fields will be retained.
If the persistentSubmitErrors parameter is true, the values of currently submit errors fields will be retained
dispatch(clearFields('FORM_NAME', false, false, 'favoriteColor'));
I am working on Redux form. I am facing some issue with dropdown values.When I select some dropdown value, I am not getting the selected value onSubmit of the form.What could be the issue?
export class AddRecipientForm extends React.Component {
onSubmit(values) {
console.log(values)
const recipient = Object.assign({}, values);
return this.props.dispatch(addRecipient(recipient));
}
render() {
if (this.props.submitSucceeded === true) {
return (
<div>
<Redirect to={`/dashboard`} />
</div>
);
}
return (
<div>
<form
className="add-recipient-form"
aria-label="add new recipient form"
onSubmit={this.props.handleSubmit(values => this.onSubmit(values))}>
<label htmlFor="name">Name</label>
<Field component="input" name="name" type="text" />
<label htmlFor="relationship">Relationship</label>
<Field component="input" type="text" name="relationship" required />
<label htmlFor="occassion">Occassion</label>
<Field component="input" type="text" name="occassion" required />
<label htmlFor="giftDate">Gift Date</label>
<Field component="input" type="date" name="giftDate" required />
<label htmlFor="gift">Gift</label>
<Field component="input" type="text" name="gift" required />
<label htmlFor="budget">Cost</label>
<Field component="input" type="number" name="budget" required />
<label
htmlFor="status">
Gift Status
</label>
<Field component={select} name="status" required>
<option value="notPurchased">Not Purchased</option>
<option value="purchased">Purchased</option>
<option value="gifted">Gifted</option>
</Field>
<button type="submit">Submit</button>
<Link to="/dashboard">
<button type="button" aria-label="go back">
Back
</button>
</Link>
</form>
</div>
);
}
}
AddRecipientForm = reduxForm({
form: 'addRecipient'
// onSubmitFail: (errors, dispatch) => {
// console.log(`Error: ${JSON.stringify(errors)}`);
// dispatch(focus('addRecipient', Object.keys(errors)[0]));
}
)(AddRecipientForm);
export default AddRecipientForm;
I am getting other values except the dropdown values. Replaced Field with select but still its not working
Finally fixed the issue by including default dropdown value.
<option key={2333333} value={''}>Please Select</option>
But still wonder why does it require default dropdown