Tengo un formulario con algunas entradas con onChange={e => handleChange(e)} en ellas. El problema es que uno de ellos, el campo de código postal, autocompleta otras entradas cuando el usuario inserta un código postal válido, por lo que onChange no se activará y, por lo tanto, el valor de entrada no se guardará.
//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) }Debe activar el evento de cambio de entrada mediante programación. hay una discusión sobre el repo de github de reacción, puede encontrar algunos fragmentos de código útiles desde allí.
La solución más genérica (tomada de here ) es:
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); } };