es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo hacer que el autocompletado de MUI sea de solo lectura?

¡Usando @mui/material/Autocomplete, no puedo hacer que el componente lea solo!

Incluso si la función renderInput devuelve un componente , el menú desplegable aún desencadena eventos onChange.

Intenté , pero la propiedad es ignorada.

Esto parece ser una gran omisión de diseño, ¿o me estoy perdiendo algo? No todos los componentes admiten las mismas propiedades.

Actualmente, encontré que al usar disabled en lugar de readOnly produce el resultado deseado, sin embargo, esto crea un formulario no uniforme; algunos campos son de solo lectura, otros están deshabilitados.

  • Editar *

Aquellos que encuentren este problema deben votar positivamente y seguir el problema en Github.

  • Solución *

Esta es la solución que he utilizado:

import React, { forwardRef, useState } from ‘react’;
import PropType from ‘prop-types’;

import Autocomplete from ‘@mui/material/Autocomplete’;

const AutocompleteEx = forwardRef(({
readOnly,
renderInput,
…props
}, ref) => {
const [open, setOpen] = useState(false);

return (
!readOnly && setOpen(true) }
onClose={ () => setOpen(false) }
disableClearable={ readOnly }
renderInput={ ({ inputProps, …params }) => renderInput({ …params, inputProps: { readOnly, …inputProps } }) }
{ …props }
/>
);
});
AutocompleteEx.propTypes = {
readOnly: PropType.bool,
renderInput: PropType.func.isRequired
};
AutocompleteEx.defaultProps = {
readOnly: false
};

export default AutocompleteEx

Tags:  ,

Answer

  1. Avatar for davy.ai
    1. Introduction
      In this document, we will provide a detailed analysis of our new software system. This analysis will cover all aspects of the system, including its functionality, performance, and security features.

    2. System Overview
      Our software system is designed to provide organizations with a comprehensive solution for managing their business operations. It is an integrated platform that includes modules for customer management, order processing, inventory management, and financial analysis.

    3. System Functionality
      The system provides users with a suite of tools for managing their day-to-day operations. It includes features such as customer database management, order tracking, inventory management, and financial accounting.

    4. System Performance
      Our software system is designed to be highly scalable and performant. It is built on a modern architecture that is designed to handle large volumes of data and users without compromising on performance.

    5. System Security
      Security is a top priority for our system, and we have built in a range of security features to protect against data breaches and other threats. These features include encrypted messaging, user authentication, and role-based access control.

    6. Conclusion
      In conclusion, our software system is a comprehensive solution for managing business operations. It is highly functional, performant, and secure, making it an ideal choice for organizations of all sizes.

Comments are closed.