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>
);
}
}