I have a form which is implemented using react-bootstrap
. I populate the default values of the fields when the form is mounted.(Default values are taken using a API). I want to make the submit button disabled if no change is done for the form. My approach is to compare the initial values of the form with the updated values onChange
form. But i cannot get the values of all the fields in the form using onChange
. I can only get the values onSubmit
but it does not help what i'm trying to achieve.
So when i receive the props i'm setting the data to an object like this
componentWillReceiveProps() {
const { login } = this.props;
console.log("Joker ", login.userInformation);
const data = {
"name" : login.userInformation && login.userInformation.name,
"address" : {
"address" : login.userInformation && login.userInformation.address.address,
"cep" : login.userInformation && login.userInformation.address.cep,
"city" : login.userInformation && login.userInformation.address.city,
"country" : login.userInformation && login.userInformation.address.country
}
}
this.setState({
initialData: data
})
}
Ideally I want to achieve something like this for onChange
handleSubmit = event => {
const { updateUserInfo, userPictureUpload, login } = this.props;
const userInfoAddress = login.userInformation !== null ? login.userInformation.address : '';
const form = event.currentTarget;
event.preventDefault();
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
const profileData = {
"name" : event.target.formUserName.value,
"address" : {
"address" : event.target.formAddress.value,
"cep" : event.target.formPostalCode.value,
"city" : event.target.formCity.value,
"country" : this.state.country === '' ? userInfoAddress.country : this.state.country
}
}
var eq = JSON.stringify(this.state.initialData) === JSON.stringify(profileData);
if (!eq) {
updateUserInfo(profileData);
} else {
alert("same");
}
}
};
But I cannot get the values for fields using onChange like event.target.formAddress.value
. How can I get the data of field onChange
of a form?