0

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?

Ajith
  • 2,476
  • 2
  • 17
  • 38
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182

0 Answers0