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