Estoy usando Mui Autocompletar como opción de selección para crear Formik Form.
<Autocomplete disablePortal options={vendors} getOptionLabel={(option) => option.vendor_company} onChange={(e, value) => {setFieldValue("vendor_id", value.id); }} renderInput={(params) => ( <TextField error={Boolean(touched.vendor_id && errors.vendor_id)} helperText={touched.vendor_id && errors.vendor_id} onBlur={handleBlur} //onChange={handleChange} fullWidth {...params} label={t('Vendor')} /> )} />A continuación, los datos JSON se extraen del servidor y se devuelven,
vendor_id : 1Para agregar un nuevo valor de selección de datos, esto funciona perfectamente.
Pero, ¿cómo cambiar el valor del campo según el modo de edición? Significa que estoy obteniendo datos del servidor y necesito mostrar los datos del servidor en el valor de Autocompletar,
Gracias,
Puede usar un estado y configurarlo con los datos de su servidor y poner el valor que desea mostrar en el valor de propiedad de su autocompletar.
Dime si echo de menos los problemas que tienes, puedo editar de nuevo.
Utilice la propiedad de 'valor' del componente Autocompletar y pase el valor que desea mostrar en el modo de edición como objeto de opción, aquí hay un pequeño ejemplo
JSX
import { useState } from "react"; import { Autocomplete, TextField } from "@mui/material"; const options = [ { label: "The Godfather", id: 1 }, { label: "Pulp Fiction", id: 2 }, ]; const App = ({ editMode = true }) => { const [fieldValue, setFieldValue] = useState(editMode ? options[1] : null); return ( <div className="App"> <Autocomplete disablePortal options={options} onChange={(e, value) => { console.log(value); setFieldValue(value); }} value={fieldValue} renderInput={(params) => ( <TextField onChange={(e) => setFieldValue(e.target.value)} label="Hello" {...params} /> )} /> </div> ); }; export default App;