无法使用 onChange 在 React.js 表单中获取自动完成的输入

Question

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)
    }

Answer 1

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);

    }

};