我正在尝试通过 React 处理按钮点击的增量。
令我感到困惑的是,递增会在数字的末尾添加一个值,而不是实际递增它,而递减则可以正常工作。例如,我通过键盘添加了一个值 30。然后,当我点击增量而不是 31 时,最终变成 301。
在我的父组件中我有:
state = {
points: 0,
}
updateInputValue = (event) => {
this.setState({points : event.target.value})
}
handlePoints = (key) => {
const { points } = this.state;
if(key === 'increment')
this.setState({ points: points + 1 })
else
points > 0 && this.setState({ points: points - 1 })
};
在 child 身上:
<input
type="number"
id="num_of_players"
name="Number of Players"
min="0" value= {this.props.points} onChange={evt =>
this.props.updateInputValue(evt)}/>
<button
width={`${BUTTON_WIDTH}px`}
fontSize={`${BUTTON_FONTSIZE}px`}
color='red'
onClick= {()=> this.props.handlePoints('increment')}><ImageContainer>
<Image><img src={ plusIconSVG } alt='plus button' /></Image>
</ImageContainer></button>
最佳答案
我认为问题在于它使用的是 plus 的字符串版本,这是连接。发生这种情况的原因是因为 event.target.value
变量是一个字符串。尝试用 parseInt
包装。
关于javascript - 如何修复增量按钮将数字添加到值的末尾而不是在 onChange 之后递增,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55986411/