0

Tengo un formulario creado con material ui, uno de los campos es un autocomplete, con useEffect traigo los datos de mi API para cargar el AUTOCOMPLETE.

La funcion GuardarDireccion llama a setDireccion que actualiza el estado de la direccion con el nuevo valor,

Al cargar la pagina si funciona el autocomplete porque me muestra la lista de estados de la API, el problema es que al seleccionar una opcion de la lista. al hacer un console.log puedo notar que el campo autocomplete no esta tomando el value pero los otros campos si, y cuando guardo el registro me aparece vacio el campo estado.

event.target.name
Undefined
event.target.value
0
event.target.name
ciudad
event.target.value
Mina
event.target.name
codigo_postal
event.target.value
78965

Codigo

function AgregarDirecciones() {

  const classes = useStyles();

  const[lista, setLista]=useState({Datos:[]});

useEffect(()=>{
  const getList=async()=>{
          const response =await axios.get(urlciudad);
          setLista(response.data);
  }
  getList();
},[]);

  const initialState = { estado: '',  ciudad: '', codigo_postal:0 }

  const [direccion, setDireccion] = useState(initialState) 

  function GuardarDireccion(event) { 
    setDireccion({...direccion, [event.target.name]: event.target.value})
  }

  function handleSubmit(event) { 
    event.preventDefault();  
        async function agregarDireccion() {
                await axios.post(url, direccion); 
            }
            agregarDireccion();
  }

  return ( 
    <div > 
    <form onSubmit={handleSubmit}>
    <Autocomplete
    style={{ width: 300 }}
    value={direccion.estado}
    onChange={GuardarDireccion}
    options={lista.Datos}
    classes={{
      option: classes.option,
    }}
    autoHighlight
    getOptionLabel={option => typeof option === 'string' ? option : option.estado}
    renderOption={option => (
      <React.Fragment>

       {option.estado}
      </React.Fragment>
    )}

     renderInput={params => (
       <TextField {...params} label="Estado"    margin="normal" variant="outlined" style={{ width: 220 }} inputProps={{
         ...params.inputProps,
         autoComplete: 'disabled', 
       }}/>
     )}
   />
                <TextField
                name="State"
                label="State"
                value={direccion.ciudad}
                onChange={GuardarDireccion}
                margin="normal"
                />
            <TextField
                name="codigo_postal"
                label="Codigo postal"
                value={direccion.codigo_postal}
                onChange={GuardarDireccion}
                margin="normal"
            />
        <Button
            variant="contained"
            type="submit">
                  Guardar
        </Button>
    </form>
    </div>
  );
}

1 respuesta 1

0

Estas guardando los valores en el estado usando el campo event.target.name pero veo que el Autocomplete se maneja diferente a los input normales

<Autocomplete
    style={{ width: 300 }}
    value={direccion.estado}
    onChange={(event, newVal) => GuardarDireccion({ target: { value: newVal, name: 'estado' } })}
    options={lista.Datos}
    classes={{
        option: classes.option,
    }}
    autoHighlight
    getOptionLabel={option => typeof option === 'string' ? option : option.estado}
    renderOption={option => (
        <React.Fragment>
            {option.estado}
        </React.Fragment>
    )}

    renderInput={params => (
        <TextField {...params} label="Estado" 
            margin="normal" 
            variant="outlined" 
            style={{ width: 220 }} 
            inputProps={{
                ...params.inputProps,
                autoComplete: 'disabled', 
                name : 'estado'
            }
        }/>
    )}
/>
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.