ReactJs 中的 JavaScript onKeyDown 事件

Question

我的ReactJs应用程序中有三个字段。 Quantity，UnitPrice和TotalNetPrice。当我们开始Quantity字段中输入任何值时，我试图计算TotalNetPrice(默认情况下unitPrice填充(。

因此，对于此要求，我使用 onKeyDown 事件。但是我在TotalNetPrice领域没有得到正确的结果。

请找到我用来计算TotalNetPrice的函数

handleTotalPrice(e)
{   
    var charCode = (e.which) ? e.which : e.keyCode;
    if(charCode >= 48 && charCode <= 57)
    {
        const item = this.state.item;
        const quantity = parseInt(item. quantity); 
        const price = parseInt(item.unit_net_price);
        var netAmount=0;
        if(quantity && price){
            netAmount=parseInt(quantity*price);
        }
        else{
             netAmount=0;
        }
        this.state.item.net_amount=netAmount;
        this.setState({ item: item });
    }
}

在第一个 onKeyDown 事件中，quantity 被视为 null，在第二个 onKeyDown 事件期间，quantity考虑我们之前输入的第一个值。

我不知道为什么会这样。

请找到我用来调用上述 javascript 函数的render()方法。

render()
{
    return ( <tr><td><input name="quantity" type="text"  maxLength="6" onKeyDown={this.handleTotalPrice} value={ this.state.item.quantity } /></td> )
}

Answer 1

使用 onkeyup 而不是 onkeydown。

    render()
{
    return ( <tr><td><input name="quantity" type="text"  maxLength="6" onKeyUp={this.handleTotalPrice} value={ this.state.item.quantity } /></td> )
}