Tengo un objeto de marca con el campo cat_id , en la carga de la página, las categorías se cargan en la selección de autocompletar. Ahora quiero establecer category id como un valor con una opción de categoría en autocompletar y también establecer cat_id desde el valor de la opción de autocompletar onChange .
const handleChange = (e) => { const { name, value } = e.target; setBrand({ ...brand, [name]: value, }); }; <Autocomplete getOptionSelected={(option, value) => option.category_name === value.id} getOptionLabel={(option) => option.category_name} name="cat_id" onInputChange={handleChange} options={categories} loading={loading} renderInput={(params) => ( <TextField {...params} label="Category" fullWidth variant="outlined" required InputProps={{ ...params.InputProps, endAdornment: ( <Fragment> {" "} {loading ? <CircularProgress color="inherit" /> : null}{" "} {params.InputProps.endAdornment} </Fragment> ), }} /> )} />;Después de esperar un rato por la ayuda. Logré resolver esto, pero no estoy seguro de si es una forma recomendada. Configuré directamente el valor del campo onChange y no usé la función handleChange .
<Autocomplete getOptionSelected={(option, value) => option.category_name === value.id} getOptionLabel={(option) => option.category_name} name="cat_id" options={categories} loading={loading} onChange={(e,option) => setBrand({...brand,cat_id: option.id,})} renderInput={(params) => ( <TextField {...params} label="Category" fullWidth variant="outlined" required InputProps={{ ...params.InputProps, endAdornment: ( <Fragment> {" "} {loading ? <CircularProgress color="inherit" /> : null}{" "} {params.InputProps.endAdornment} </Fragment> ), }} /> )} />;