JavaScript ReactJs 中的 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> )
}

JavaScript ReactJs 中的 onKeyDown 事件

JavaScript onKeyDown event in ReactJs

javascript

reactjs

onkeydown