Adding Values From 2 TextBoxes Without A Button In React - reactjs

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)

Answer 1

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.