如何修复递增按钮将数字添加到值的末尾而不是在onChange之后递增

Question

我正在尝试通过React来处理按钮点击的增量。

我被难倒的是，递增将一个值添加到数字的末尾，而不是实际递增它，而递减是正确的。例如，我通过键盘添加的值为30。然后当我点击increment而不是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 })
};

在孩子身上：

<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>

Answer 1

我认为问题在于它使用的是字符串形式的加号，也就是拼接。发生这种情况的原因是因为event.target.value变量是一个字符串。尝试使用parseInt进行包装。