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

Question

我正在尝试通过 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>

Answer 1

我认为问题在于它使用的是 plus 的字符串版本，这是连接。发生这种情况的原因是因为 event.target.value 变量是一个字符串。尝试用 parseInt 包装。