JavaScript onKeyDown event in ReactJs

Question

I have three fields in my ReactJs application. Quantity, UnitPrice & TotalNetPrice. Am trying to calculate TotalNetPrice when we started entering any values in Quantity field ( unitPrice by default its populated ).

so, for this requirement, am using onKeyDown event. But am not getting the proper results in the TotalNetPrice field.

Please find my function that am using to calculate the 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 });
    }
}

During the first onKeyDown event quantity is taking as null and during the second onKeyDown event quantity considering the first value that we entered previously.

Am not sure why it is happening like this.

Please find my render() method that am using to call the above javascript function.

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

Try using onkeyup event instead of onkeydown. Or use oninput event. — Lalit
– Lalit, Commented Jan 1, 2018 at 6:29

Lalit · Accepted Answer · 2018-01-01 06:39:12Z

1

Use onkeyup instead of onkeydown.

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

answered Jan 1, 2018 at 6:39

Lalit

1,3691 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript onKeyDown event in ReactJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related