Añadir un cuadro de texto TextField en un web part React con SharePoint Framework

TextField en un web part de SharePoint Framework con React 

SharePoint Framework

Vamos a generar un web part y utilizar un componente TextField de Office UI fabric. Con Office fabric UI puedes aplicar simples estilos CSS a los elementos de tus aplicaciones web y hacer que obtengan automáticamente el aspecto de las aplicaciones de Office. Es algo interesante cuando desarrollamos web parts en SharePoitn Online ya que conseguimos que estos web parts, sin necesidad de tener que jugar con hojas de estilo, tengan la misma apariencia que el resto de componentes de SharePoint que se visualizan en la página. Los estilos tienen en cuenta la tipografía, los colores, los iconos, las animaciones, la distribución de elementos e incluso la localización a varios idiomas. Otra ventaja es que estos estilos se adaptan sin problema a cualquier dispositivo: escritorio, móvil, tableta...

Office UI Fabric me ayudó mucho a dar el cambio de programar para SharePoint con SPFX después de varios años como programador backend en C# y con mi poca experiencia (y poco gusto) en maquetación, css.

Este post puede ser un primer ejemplo de cómo utilizar componentes UI Fabric dentro de un web part con react ya que será un ejemplo básico. En otros post directamente trato los componentes UI Fabric como algo normal y hablo de otras cosas más avanzadas. 

Doy por creado el web part con yeoman con Framework React, por loq ue paso directamente al código fuente para añadir el componente UI Fabric.

Lo primero que tenemos que hacer es un import del módulo. 

import { TextField } from "office-ui-fabric-react";  

Los datos que se escriban en el textfield, los iremos guardando en el state de react, para ello tendremos que añadir un campo nuevo dentro del state.

En el render, vamos a pintar el TextField.  Veremos que en el onChanged del TextField, iremos guardando los valores en el state. Para ello generamos una función handleInputChange

<TextField label="Text Field Name:" id="textFieldID" onChanged={(value) => this.handleInputChange(textFieldID, value)} required={true} />

Esa función realiza lo siguiente. 

    public handleInputChange(id, value) {

      this.setState({

        textFieldValue: value

      });

    }

De este modo el valor del textbox lo tendremos siempre en el state de react.