Adding Values From 2 TextBoxes Without A Button In React

Question

i am trying to create an accounting page wherein I try to add percentage and net to get the get value as well as the total value however I don't know how to implement a function without a button I don't have any examples to go through as well if anyone can help me that would be really grateful

the code is as follows

import React, { Component } from 'react';


import { connect } from "react-redux";
import { getData } from "../actions/company"
import "./css/InvoiceAdd.css"
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import "./css/Togglebox.css"


export class InvoiceSales extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Invoice_Date: '',
            company_name: '',
            GSTIN: '',
            invoice_no: '',
            percentage: 0,
            net: 0,
            igst: 0,
            cgst: 0,
            sgst: 0,
            total_invoice: 0,

        };
        console.log(this.state);
        this.onChange = this.onChange.bind(this);
        this.onCreate = this.onCreate.bind(this);
        this.handlenum1Change = this.handlenum1Change.bind(this);
        this.handlenum2Change = this.handlenum2Change.bind(this);
    }


    componentDidMount() {
        document.body.classList.add("background-black");
    }

    componentDidMount() {
        this.props.getData();

    }

    componentWillUnmount() {
        document.body.classList.remove("background-black");
    }

    onChange = event => {
        this.setState({ [event.target.name]: event.target.value });
    };

    handlenum1Change = evt => {
       console.log(evt.target.value);
       this.setState({percentage:Number(evt.target.value) });
    }
    handlenum2Change = evt => {
        console.log(evt.target.value);
        this.setState({net:Number(evt.target.value) });

    };


    onCreate(e) {
        e.preventDefault();
        let Invoice = {
            Invoice_Date: this.state.Invoice_Date,
            company_name: this.state.company_name,
            GSTIN: this.state.GSTIN,
            invoice_no: this.state.invoice_no,
            percentage: this.state.percentage,
            net: this.state.net,
            igst: this.state.igst,
            sgst: this.state.sgst,
            total_invoice: this.state.total_invoice
        };
        console.log(Invoice);
        this.props.postData(Invoice);
        this.setState({
            Invoice_Date: '',
            company_name: '',
            GSTIN: '',
            invoice_no: '',
            percentage: 0,
            net: 0,
            igst: 0,
            cgst: '',
            sgst: '',
            total_invoice: ''

        });
    }




    render() {
        return (
            <div classname="masterfile-add" >
                <form className="masterfileadd-form">

                    <p><label className="masterfileadd-text">
                        Invoice Date :
                          <DatePicker dateFormat="dd-MM-yyyy" selected={this.state.date} onChange={this.handleDateChange} className="itextbox1" />
                    </label>
                    </p>


                    <label className="masterfileadd-text">
                        Company Name:
                              < select value={this.state.company} onchange={this.onChange} name="company_name" className="itextbox2">
                            {this.props.company.map(company => {
                                return <option value={company.company_name}>{company.company_name}</option>
                            })}
                        </select>
                    </label>

                    <p><label className="masterfileadd-text">
                        GSTIN :
                        <input type="text" name="GSTIN" value={this.state.GSTIN} onChange={this.onChange} className="itextbox3"></input>
                    </label>
                    </p>
                    <p><label className="masterfileadd-text">
                        Invoice No :
                        <input type="text" name="invoice_no" value={this.state.invoice_no} onChange={this.onChange} className="itextbox4"></input>
                    </label>
                    </p>
                    <p> <label className="masterfileadd-text">
                        Percentage:
                        <input type="number" step="0.1" name="percentage" value={this.state.percentage} handlenum1Change={this.handlenum1Change}  className="itextbox5"></input>
                    </label>
                    </p>
                    <p><label className="masterfileadd-text">
                        NET :
                        <input type="number" name="net" value={this.state.net} handlenum2Change={this.handlenum2Change}  className="itextbox6"></input>
                    </label>
                    </p>
                    <p><label className="masterfileadd-select">
                        IGST :
                      <input type="text" value={this.state.igst} readOnly />
                    </label>
                    </p>
                    <p><label className="masterfileadd-select">
                        CGST :
                        <input type="text" name="cgst" value={this.state.opening_balance} onChange={this.onChange} className="itextbox8"></input>
                    </label>
                    </p>
                    <p><label className="masterfileadd-select">
                        SGST:
                        <input type="text" name="sgst" value={this.state.opening_balance} onChange={this.onChange} className="itextbox9"></input>
                    </label>
                    </p>
                    <p><label className="masterfileadd-select">
                        Total Invoice :
                              <input type="text" name="total_invoice" value={this.state.head_of_account} onChange={this.onChange} className="itextbox10"></input>
                    </label>
                    </p>

                    <p className="iButton" ><input type="submit" value="Submit" onChange={this.onChange} onClick={this.onCreate} className="mButtonAdd" />
                    </p>
                </form>

            </div>
        )
    }
}


const mapStateToProps = state => ({
    company: state.companyReducer.company,
    error: state.journalReducer.error
});



export default connect(
    mapStateToProps,
    { getData }
)(InvoiceSales)

score 0 · Accepted Answer · answered May 21 '20 at 09:51

0

Hı ,

in onchange event

if(event.target.name =="input1" || event.target.name=="input2")
{
 this.setState({result: Number(this.state.input1)+ Number(this.state.input2)})
}

try something like this. input1 and input2 are your textboxes. And be sure textbox value is number .may be you can check.

answered May 21 '20 at 09:51

Bahtiyar

192
1
6

sir it does work but there is a slight delay in the output as it provides the previous value output like if i type 12+12 it gives me answer 13 but then i change it to 12+13= it gives me the answer of 12+12 – yash b May 21 '20 at 11:26
Because of SetState is asynchronous. Using callback function might be Solutions. – Bahtiyar May 21 '20 at 16:31
Look this example https://stackoverflow.com/questions/38558200/react-setstate-not-updating-immediately – Bahtiyar May 21 '20 at 16:31

Adding Values From 2 TextBoxes Without A Button In React

1 Answers1