問題は、減少が最初に行われない場合にのみ数字を増加させます。

Question

私は最初の反応割り当てと奇妙な問題に取り組んでいます。私はテキストをクリックして、ページにフォームを表示させる必要があります。フォームが表示されている間、私のサイズの小道具は16です。私が - ボタンを選択した場合、数字は15に減少します。+を選択すると、16に戻ります。

問題は、ボタンを押します。それが表示されます1.によって数をインクリメントするのではなく、私の電話番号の末尾に1を追加します161

マイHTML

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

MY JS

class FontChooser extends React.Component { 

constructor(props) { 
super(props); 
this.state = {hidden: 'true', size: this.props.size }; 

} 

handleClick() { 
    if(this.state.hidden == 'true') 
     this.setState({hidden: ''}); 
    else 
     this.setState({hidden: 'true'}); 

} 

decrease() { 
    this.setState({size: this.state.size -1}); 
} 

increase() { 
    this.setState({size: this.state.size +1}); 
} 

render() { 

return(

     <div> 
     <input type="checkbox" id="boldCheckbox" hidden={this.state.hidden}/> 
     <button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} >-</button> 
     <span id="fontSizeSpan" hidden={this.state.hidden}>{this.state.size}</span> 
     <button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} >+</button> 
     <span id="textSpan" onClick={this.handleClick.bind(this)} >{this.props.text} 
     </span> 

     </div> 
); 
} 
} 

Answer 1

は、あなたがしているようです文字列を扱うあなたはどんな計算を行う前numberに変換しよう：
this.setState({size: Number(this.state.size) + 1});

Answer 2

他の答えは私の意見では、働くかもしれないが、ここでの本当の問題はあなたが合格しなければならないとき、あなたのリアクト要素に文字列を渡しているということです代わりに番号。あなたはすべてあなたの状態値のための文字列を使用している場合

<FontChooser min={4} max={40} size={16} text='Fun with React!' bold={false} /> 

文字列の作品にあなたの状態値をキャストすることによって、これを回避する、しかし、あなたは頭痛に実行するつもりです。