react (4): eventos y estados

Cómo cambiar un estado de forma dinámica con React

Keith Haring

archivado en: JavaScript / 20 julio, 2015 / taller:

Importante!

Este taller es sobre una versión antigua de React. Salvo que te guste la arqueología, es mejor que leas esta otra, React revisitado, que está actualizada... al menos de momento (verano de 2017)

Seguimos con React. En esta entrada empezamos con los eventos, las propiedades y los estados y para eso vamos a crear un componente muy sencillo: un input que muestre en la parte inferior el texto que estamos escribiendo. Lo sé, es una tontuna, pero didáctica ^^.

El input ya lo deberíamos saber pintar sin problemas: definimos el fragmento html-jsx, creamos una clase en la que definimos el fragmento html-jsx y la pintamos en el DOM con el método render. Algo así:

var InputFormidable = React.createClass({

render: function() {

return (

<div>

<input type='text'  />

</div>

)

}

});

React.render(

<InputFormidable />,

document.getElementById('contenedorInput')

);

Si queremos partir la línea jsx en el return de la clase para que sea más legible, hay que incluir ese fragmento entre paréntesis ().

Ahora podemos añadir un evento, que en React se hace como en Angular, a la manera antigua, esto es, incluyéndolo en el propio «tag» (que recordemos no es html, sino javaScript).

<tag evento="{this.nombreMetodo}">

React soporta una montonera de eventos:

  • De ratón: onClick, onContextMenu, onDoubleClick, onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp,
  • Drag & Drop: onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop.
  • Focos y formularios: onFocus, onBlur, onChange, onInput, onSubmit.
  • Touchs: onTouchCancel, onTouchEnd, onTouchMove, onTouchStart.
  • Cortar y pegar: onCopy, onCut, onPaste.
  • Scrolls: onScroll, onWheel.

Después del evento, en una expresión enmarcada en tanto que tal entre llaves, indicamos el método precedido por la partícula this, pues es un método de la propia clase donde se está definiendo.

Así, sabiendo esto, podemos hacer algo así para capturar lo que se va tecleando en nuestro input formidable.

<input type='text' onKeyUp={this.eventoInput} />

Y, de momento, solo nos faltaría añadir a la clase el método que estamos invocando en el evento onKeyUp:

var InputFormidable = React.createClass({

eventoInput: function(event) {

// Aquí haremos algo...

},

render: function() {

return (

<div>

<input type='text' onKeyUp={this.eventoInput} />

</div>

)

}

});

Propiedades y estados

Sobre este tema volveré más adelante, así que no hace falta que lo comprendamos ahora todo al cien por cien, es solo para ir hacéndonos una idea. En los componentes React podemos definir dos tipos de valores: las propiedades (props), que son inmutables y desde que son definidas no cambian durante el ciclo de vida de un componente; y los estados (state), que sí van cambiando dinámicamente.

Por ejemplo, así podríamos incluir una propiedad en nuestro componente que no va a cambiar una vez que lo rendericemos.

...

render: function() {

return (<div>

<input type='text' onKeyUp={this.eventoInput} placeholder ={this.props.miPlaceholder} />

</div>)

}

});

React.render(

<InputFormidable miPlaceholder="escribe algo" />,

document.getElementById('contenedorInput')

);

Sin embargo, nosotros queremos que la propiedad vaya cambiando a medida que se vaya escribiendo en el input, así que en lugar de una prop vamos a utilizar un state, ya que cada vez que se cambia su valor, se vuelve a renderizar el componente. Y para eso vamos a necesitar dos métodos nuevos:

  • getInitialState(): se incluye en la clase y permite definir el valor inicial de los valores state (sin los cuales, no funcionaría).
  • y setState(): sirve para modificar el valor de un estado.

En código, ya todo junto:

 

var InputFormidable = React.createClass({

getInitialState: function() {

return {

textoInput: ""

};

},

eventoInput: function(event) {

this.setState({ textoInput: event.target.value });

},

render: function() {

return (<div>

<input type='text' onKeyUp={this.eventoInput} placeholder={this.props.miPlaceholder} />

<div>{this.state.textoInput}</div>

</div>)

}

});

React.render(

<InputFormidable miPlaceholder="escribe algo" />,

document.getElementById('contenedorInput')

);

 

Y ale op, ya tendríamos un input dinámico (ver ejemplo, con el JSX ya compilado, en codepen). Bueno, pues por hoy lo dejo aquí, que es tarde y marcho a dormir.

|| Tags: ,

valoración de los lectores sobre react (4): eventos y estados

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.5 sobre 5 (4 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.