問題增加了一些只有減少沒有完成第一

我的工作我的第一個反應過來的分配和運行到一個奇怪的問題。我需要點擊文字有一種形式出現在頁面上。當顯示形式我的尺寸道具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> 
); 
} 
}

來源

2017-10-05 Mike Beers

'parseInt函數（數）;' – fungusanthrax

看來你是使用字符串。嘗試將它轉換爲number你做任何計算之前：
this.setState({size: Number(this.state.size) + 1});

來源

2017-10-05 18:42:37

真棒固定它 –

而對方的回答可能工作，在我看來，真正的問題是，你的字符串傳遞到你的陣營元素時，你應該傳遞數字代替。

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

你的狀態值鑄造成一個字符串作品避免這一點，但如果你使用字符串所有的狀態值，你會碰到麻煩。

來源

2017-10-05 21:29:19

問題增加了一些只有減少沒有完成第一

回答

相關問題