• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

125
Views
Can't get autocompleted inputs in React.js form with onChange

I have a form with some inputs with onChange={e => handleChange(e)} in them. The problem is that one of them, the ZIP code field, autocompletes other inputs when the user inserts a valid ZIP so the onChange won't be triggered and thus the input value won't be saved.

    //SAVING DATA FROM FORM
    const [values, setValues] = useState({})

    function handleChange(e) {
        setValues({ ...values, [e.target.id]: e.target.value})
    }

    //AUTOCOMPLETING FROM ZIP
    const [address, setAddress] = useState("")
    const [neighborhood, setNeighborhood] = useState("")
    const [city, setCity] = useState("")
    const [state, setState] = useState("")

    async function searchZIP(zip) {
        zip = zip.replace(/\D/g, "")
        const data = await fetch(`http://viacep.com.br/ws/${zip}/json/`)
            .then(data => data.json())
            .catch(data => data = "")
            
        let { logradouro="--", bairro="--", localidade="--", uf="--" } = data
        if(zip.length === 0) logradouro="", bairro="", localidade="", uf=""
        
        setAddress(logradouro)
        setNeighborhood(bairro)
        setCity(localidade)
        setState(uf)
    }

    //SUBMITING
    function handleSubmit(e) {
        e.preventDefault()
        axios.post("http://localhost:8080", values)
    }
about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

You need to trigger input change event programmatically. there is discussion about on react github repo, you can find some useful code snippets from there.

The most generic solution (taken from here) is:

const inputTypes = [
    window.HTMLInputElement,
    window.HTMLSelectElement,
    window.HTMLTextAreaElement,
];

export const triggerInputChange = (node, value = '') => {

    // only process the change on elements we know have a value setter in their constructor
    if ( inputTypes.indexOf(node.__proto__.constructor) >-1 ) {

        const setValue = Object.getOwnPropertyDescriptor(node.__proto__, 'value').set;
        const event = new Event('input', { bubbles: true });

        setValue.call(node, value);
        node.dispatchEvent(event);

    }

};
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error