Saltar al contenido

Cómo utilizar un área de texto multilínea en ReactJS

es la etiqueta oficial en HTML5 para definir un control de entrada de texto de varias líneas.

Una gran ventaja de su uso es que proporciona valores de entrada multilínea de modo que todos los valores pueden ser completamente visibles para el usuario.

Cómo utilizar un área de texto multilínea en ReactJS
Cómo utilizar un área de texto multilínea en ReactJS

La mayoría de las veces, puede utilizarse para añadir las direcciones primarias y secundarias del usuario, de manera que sean completamente visibles para el usuario.

Veamos un ejemplo que se usa en ReactJs.

123<textarea; Esto es simple textarea</textarea&;

jsx

Aquí, en este breve ejemplo, el valor entre las etiquetas define el valor de la entrada, por lo que cuando ejecutamos este ejemplo, toma la cadena como valor por defecto.

1234567891011121314151617181920212223242526272829importReact,{Componente}de "reaccionar";classTextareademo extiendeComponente{constructor(){super();this.state={ textAreaValue:""};this.handleChange=este.handleChange.bind(this);}handleChange(event){this. setState({ textAreaValue: event.target.value});}render(){return(<div><label>Enter value : </label><textareavalue={this.state.textAreaValue}onChange={this.handleChange}/{;</div>);}}exportdefaultTextareademo;

jsx

En el ejemplo anterior, se ha utilizado la etiqueta. Note que el número de líneas de entrada es más de 1, lo que significa que el valor puede ser aún visible para el usuario mientras escribe.

Aumentar el número de líneas visibles para el usuario mediante el uso de propiedades adicionales, como se explica a continuación.

12345678910111213render(){retorno(www.textareavalue={este.state.textAreaValue}onChange={este.handleChange}rows={5}cols={5}/INFORME DE LA EMPRESA};);}

jsx

Dos propiedades adicionales, filas y columnas, definen cuántas filas y columnas se pueden crear para el área de texto específica.

tiene toneladas de diversas propiedades disponibles para su uso:

  • Filas
  • Cols
  • Requerido
  • Envolver
  • Discapacitado
  • Marcador de posición
  • MaxLength
  • Nombre
  • Sólo lectura

Puede utilizar cualquiera de esas propiedades con el campo de formulario basado en sus requisitos funcionales.