0
1.2K
VistasEn MUI, ¿cuándo usamos Input vs. TextField para crear un formulario?
Tal vez esto sea solo una pregunta básica, pero hasta ahora no he encontrado ninguna explicación razonable. Soy un principiante en reaccionar y uso MUI recientemente. No tengo muy claro cuándo usar una entrada o un campo de Textfield para crear un formulario.
Mirando la documentación, parece que TextField es un superconjunto de lo que Input puede hacer, pero no estoy seguro. El sitio de MUI usa ejemplos para TextField y Input , sin indicar los beneficios de uno sobre el otro y ningún caso de uso.
Por favor recomiende.
2 Respuestas
Responde la pregunta0
Para la mayoría de los casos de uso, debe usar TextField en lugar de los componentes de nivel inferior a los que delega (como Input ).
La parte relevante de la documentación está aquí .
Particularmente esta línea:
TextField se compone de componentes más pequeños (FormControl, Input, FilledInput, InputLabel, OutlinedInput y FormHelperText) que puede aprovechar directamente para personalizar significativamente las entradas de su formulario.
La razón principal para usar estos componentes de nivel inferior es si necesita personalizar la entrada de su formulario de alguna manera que no sea compatible con TextField .
0
Esta es una definición simplificada del componente TextField :
<FormControl {...other}> {label && ( <InputLabel {...InputLabelProps}> {label} </InputLabel> )} {select ? ( <Select {...SelectProps}> {children} </Select> ) : ( <Input {...InputProps} /> )} {helperText && ( <FormHelperText {...FormHelperTextProps}> {helperText} </FormHelperText> )} </FormControl> Como puedes ver, el TextField es más que un Input , consiste en:
FormControl: es solo un proveedor de contexto que se usa para pasar el estado deTextField(foco, error, pasar el mouse...) a los niños y asegurarse de que se mantengan consistentes. Por lo general, no tiene que usar este componente directamente.InputLabel: la etiqueta deTextField,Inputno tiene una propia, por lo que si desea agregar una etiqueta a suInput, useTextField.FormHelperText: el texto de ayuda colocado debajo deInput, que se usa para describirTextFieldo mostrar algún mensaje de error en la validación del formulario.Input: La entrada en sí. En realidad, hay 3 componentes de entrada en diferentes variantes:Input,OutlinedInputyFilledInputque se pueden configurar mediante lavariantde apoyo enTextField. Esta es una razón más para usarTextField, en lugar de buscar e importar diferentes componentes de entrada, simplemente puede configurar la variante yTextFieldsabrá qué representar.Select:TextFieldpuede serSelectoInput. Establezca el accesorio deselectpara cambiar el tipo de entrada para seleccionar.
Entonces, ¿cuándo usar TextField ? En un formulario en el que desea mostrar una Input con una etiqueta y tener una forma de configurar el mensaje de error en una API limpia, que es la mayor parte del tiempo.
¿Cuándo usar Input ? Cuando no necesita todo lo anterior excepto algo para escribir, o cuando necesita una personalización extrema y la API de TextField no es suficiente para usted.
