I have a form which uses react-bootstrap
components and when the form loads,the fields will be populated with default values and these fields can be edited. I want to keep my submit button disabled if no change is done for the form. If any change is done for the form, i want the submit button to be able to submit.
In angularjs you can do this using pristine
, dirty
etc. How can i do it in reactjs and react bootstrap?
My form
<Form noValidate validated={validated} onSubmit={this.handleSubmit}>
<div id="" className="pb-3 pr-lg-5 pr-xs-0">
<div id="form_data" className="pb-3 pr-0">
<Form.Group as={Row} controlId="formAddress">
<Form.Label column sm="2" lg="4">
<label className="label_type2">Address</label>
</Form.Label>
<Col sm="10" lg="8">
<Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.address} className="input_text" required />
</Col>
</Form.Group>
<Form.Group as={Row} controlId="formPostalCode">
<Form.Label column sm="2" lg="4">
<label className="label_type2">Postal code</label>
</Form.Label>
<Col sm="10" lg="4">
<Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.cep} className="input_text" required />
</Col>
</Form.Group>
</div>
<Button type="submit" size="lg" variant="light" className="mt-5 mb-3 btn_type1" id="button_primary_clr">Update information</Button>
</div>
</Form>
Since you are not using redux form, i will explain the logic how you need to achieve it
So your state will have a key and value like the below format, these are the pre populated values
state = {formValues:{firstName: 'John', secondName: 'Doe', Address: ''}, isFormDirty: false}
So based on the initial state of isFormDirty you can disable the button, since there is no changes
Now you need to attach a method to Form at the top level, since event delegation happens you will get the event from the child input so assume firstName field user has changed now you can have a object as inside state when the component loads
changedValues: {firstName: false, secondName: false, Address: false}
Now you have two objects changedValues and formValues
onFormHandleChange = (e) => {
// compare the current value and pre populated value
e.target.value === formValues[e.target.name]
// if its true
changedValues[e.target.name] = true
else false
}
so based on this changedValues object like Object.values(this.state.changedValues)
array contains true you can make isFormDirty to true
since state updated your button gets enabled
I hope this will give a better understanding of the problem
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.