<input>

<input />

• Referencia
  • <input>
• Uso
  • Visualización de inputs de diferentes tipos
  • Proporcionar una etiqueta para un input
  • Proporcionar un valor inicial para un input
  • Leer los valores de los inputs cuando se envía un formulario
  • Controlar un input con un estado variable
  • Optimizar la re-renderización en cada pulsación del teclado
• Solución de problemas
  • Mi input de tipo texto no se actualiza cuando escribo dentro de él
  • Mi checkbox no se actualiza cuando le doy click
  • El caret de mi input salta al principio de cada pulsación del teclado
  • Estoy teniendo un error: “Un componente esta cambiando un input no controlado para ser controlado”

Referencia

<input>

Para mostrar un input, renderiza el componente <input> incorporado en el navegador.

<input name="myInput" />

Ver más ejemplos abajo.

Props

<input> admite todas las props comunes de los elementos.

• formAction: A string or function. Overrides the parent <form action> for type="submit" and type="image". When a URL is passed to action the form will behave like a standard HTML form. When a function is passed to formAction the function will handle the form submission. See <form action>.

Puedes hacer un input controlado pasando una de estas props:

• checked: Booleano. Para un entrada de tipo checkbox o radio button, controla si está seleccionado.
• value: String. Para una entrada de texto, controla su texto. (Para un radio button, especifica sus datos de formulario.)

Cuando pases cualquiera de ellos, debes también pasar un controlador onChange que actualice el valor pasado.

Estas props de <input> son solamente relevantes para inputs no controlados:

• defaultChecked: Booleano. Especifica el valor inicial para inputs type="checkbox" y type="radio".
• defaultValue: String. Especifica el valor inicial para un input de texto.

Estas props de <input> son relevantes para ambos inputs controlados y no controlados:

• accept: String. Especifica cuales tipos de archivo son soportados por un input type="file".
• alt: String. Especifica el texto alternativo de una imagen para un input type="image".
• capture: String. Especifica el medio capturado (micrófono, video, o cámara) por un input type="file".
• autoComplete: String. Especifica uno de los posibles comportamientos de autocompletado.
• autoFocus: Booleano. Si es true, React enfocara al elemento al montarlo.
• dirname: String. Especifica el nombre del campo de formulario para la direccionalidad del elemento.
• disabled: Booleano. Si es true, el input no será interactivo y aparecerá oscurecido.
• children: <input> no acepta hijos.
• form: String. Especifica el id del <form> al que este input pertenece. Si se omite, es el formulario padre más cercano.
• formAction: String. Sobrescribe el <form action> padre para type="submit" y type="image".
• formEnctype: String. Sobrescribe el <form enctype> padre para type="submit" y type="image".
• formMethod: String. Sobrescribe el <form method> padre para type="submit" y type="image".
• formNoValidate: String. Sobrescribe el <form noValidate> padre para type="submit" y type="image".
• formTarget: String. Sobrescribe <form target> padre para type="submit" y type="image".
• height: String. Especifica la altura de la imagen para type="image".
• list: String. Especifica el id del <datalist> con las opciones de autocompletado.
• max: Número. Especifica el máximo valor de los inputs de tipo numérico y de fecha y hora.
• maxLength: Número. Especifica la longitud máxima del texto y otros inputs.
• min: Número. Especifica el valor mínimo de los inputs de tipo numérico y de fecha y hora.
• minLength: Número. Especifica la longitud mínima de texto y otros inputs.
• multiple: Booleano. Especifica si valores múltiples son permitidos para <type="file" y type="email".
• name: String. Especifica el nombre para este input que se envía con el formulario.
• onChange: Un controlador de evento. Requerido para inputs controlados. Se activa inmediatamente cuando el valor del input es cambiado por el usuario (por ejemplo, se activa en cada pulsación de teclas). Se comporta como el evento input del navegador.
• onChangeCapture: Una versión de onChange que se activa en la fase de captura.
• onInput: Un controlador de evento. Se activa inmediatamente cuando el valor es cambiado por el usuario. Por razones históricas, en React es idiomático usar onChange en su lugar que funciona de forma similar.
• onInputCapture: Una version de onInput que se activa en la fase de captura.
• onInvalid: Un controlador de evento. Se activa si un input falla en la validación cuando se envía un formulario. A diferencia del evento integrado invalid, el evento onInvalid de React se propaga.
• onInvalidCapture: Una versión de onInvalid que se activa en la fase de captura.
• onSelect: Un controlador de evento. Se activa después de selección dentro de los cambios de un <input>. React hereda el evento onSelect para también activarse para selecciones vacías y en ediciones (las cuales pueden afectar la selección).
• onSelectCapture: Una versión onSelect que se activa en la fase de captura.
• pattern: String. Especifica el patrón con el cual value debe coincidir.
• placeholder: String. Mostrado en un color atenuado cuando el valor del input esta vació.
• readOnly: Booleano. Si es true, el usuario no puede editar el input.
• required: Booleano. Si es true, el valor debe ser proporcionado para poder enviar el formulario.
• size: Número. Similar a configurar el ancho, pero la unidad depende del control.
• src: String. Especifica la fuente de la imagen para un input type="image".
• step: Un número positivo o un string 'any'. Especifica la distancia entre los valores validos.
• type: String. Uno de los tipos de input.
• width: String. Especifica el ancho de la imagen para un input type="image".

Advertencias

• Los Checkboxes necesitan checked (o defaultChecked), no value (o defaultValue).
• Si un input de texto recibe una prop value de tipo string , será tratado como controlado.
• Si un checkbox o un radio button recibe una prop checked de tipo booleano, será tratado como controlado.
• Un input no puede ser controlado o no controlado al mismo tiempo.
• Un input no puede cambiar entre ser controlado o no durante su ciclo de vida.
• Cada input controlado necesita un controlador de evento onChange que sincrónicamente actualice su valor de respaldo.

Uso

Visualización de inputs de diferentes tipos

Para visualizar un input, renderiza un componente <input>. Por defecto, será un input de tipo texto. Puedes pasar type="checkbox" para un checkbox, type="radio" para un radio button, o uno de los otros tipos de inputs.