0

Hola estoy incursionando en React Js y estoy mirando como se comportan los props y los state. Estoy pasando unas props por el ReactDom y trato de gestionarlas y veo que no cambian su estado inicial. Ahora estoy trabajando con las states y veo que si cambian. Bueno primero quiero me aclaren como funciona en realidad esto en React. Mi segunda pregunta es porque en mi codigo estoy trantando de aumentar el valor de un state y solo la resta funciona correctamente cuando las dos funciones estan declaradas de igualmanera ? A continuacion les pongo el codigo de ejemplo para que se fijen en el comportamiento del la funcion _handleIncreaseButton().

<style>
h2{
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  color: #fff;
  background-color: #0288D1;
  margin-bottom: 0px;
  padding: 10px;

}
button{
  margin: 0 10px 0 10px;
}
#text-style,#text-size { 
    display: block;
    margin: 10px 0 10px 0;
  }
 #list{
  border: 1px solid #0288D1;
  background-color: #fff;
  margin-top: 0px;
  padding: 10px
 }
 #menu{
  display:inline-block;
 }
</style>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<script src="FontChooser.js" type="text/jsx"></script>

<div id='container'></div>

<script type="text/jsx">

ReactDOM.render(
   <div>
    <FontChooser min='4' max='40' size='16' text='Fun with React !' bold='false'/>
   </div>,
document.getElementById('container')
);

</script>

/------Codigo React------/

class FontChooser extends React.Component {

constructor(props) {
super(props);
this.state = {
    size: this.props.size,
    textStyle: this.props.Bold,
    min: this.props.min,
    max: this.props.max
 };
}
_handleDecreaseButton(){ 
    this.setState({size: this.state.size - 1});
}
_handleIncreaseButton(){ 
    this.setState({size: this.state.size + 1});
}



render() {

return(
    <div id="bloque">
        <div id="menu" >
               <h2 >Text Edit</h2>
               <div id="list" >
                   <div id="text-style">
                       <label id="checkbox-label">Transform to Bold: </label>
                       <input type="checkbox" id="boldCheckbox" />
                   </div>
                   <div id="text-size">
                       <label id="checkbox-label-size">Font Size: </label>
                       <button id="decreaseButton" onClick={ this._handleDecreaseButton.bind(this)}>-</button>
                       <span id="fontSizeSpan" >{this.props.size}</span>
                       <button id="increaseButton" onClick={ this._handleIncreaseButton.bind(this)}>+</button>
                   </div>
                </div>
        </div>
        <div>
            <span id="textSpan">{this.props.text}</span>
            <span id="textSpan">{this.state.size}</span>
        </div>
     </div>  
);
}
}

2 respuestas 2

1

Tienes que asegurarte que el size sea un int para poder sumarlo utilizando parseInt(), de otro modo lo concatenara como que fuera un string, y por esta razón funcionaba con el "-" pero no con el "+"

_handleDecreaseButton(){ 
    this.setState({size: parseInt(this.state.size) - 1});
}
_handleIncreaseButton(){ 
    this.setState({size: parseInt(this.state.size) + 1});
}

En cuanto a los props y state, los props son las propiedades con las que se inicializa un componente, y estos son fijos durante el ciclo de vida de este, en cambio los states son los que utilizamos cuando el valor se va a actualizar o cambiar.

1
  • Muchas gracias por tu respuesta. He resuelto todas mis dudas Commented el 28 feb. 2018 a las 17:53
1

Cabe notar que la manera en como actualizas en state no es la mejor, debes tener cuidado ya que state y props se pueden actualizar de manera asíncrona y pueden mostrar valores equivocados.

La mejor manera de actualizar un state que es dependiente del valor anterior como el que muestras de ejemplo, es enviando una función en lugar de un objecto al método setState. Esta function le defines como parametros el state anterior y los props, para este caso solo el state previo.

this.setState((prevState) => ({
  counter: prevState.counter + 1
}));

Te recomiendo que veas la documentación

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.