Lost focus from the input when you change?

Enter data in input, after I typed 1 character, the focus disappears. But if you completely wipe the data from input, the focus is not lost. Assume that the catch in the function changeDiscount
Below the code of the page
Code page
export default class InvoiceCreate extends Component {
 constructor(props) {
super(props);
 this.state = {
 products: [],
customers:[],
valueCustomer:",
valueProducts:",
 dataTable: [],
total:0
};
 this.loadData = this.loadData.bind(this);
 this.add = this.add.bind(this);
 this.changeStateCustomer = this.changeStateCustomer.bind(this);
 this.changeStateProduct = this.changeStateProduct.bind(this);
 this.funcCustomers = this.funcCustomers.bind(this);
 this.funcProducts = this.funcProducts.bind(this);
 this.price = this.price.bind(this);
 this.changeDiscount =this.changeDiscount.bind(this);
 this.sendForm = this.sendForm.bind(this);
 this.nameAutoFocus = true;
}
 componentDidMount() {
this.loadData();
 this.nameAutoFocus = false;
}
 sendForm() {
 let content
}
 changeDiscount(e) {
 if (e.target.value===") return null;
 if ((e.target.value!==")&&(e.target.value)) {
 let discount_id = e.target.parentElement.parentElement.parentElement.dataset.id;
 let dataTable=this.state.dataTable;
 dataTable[discount_id].qty = e.target.value;
 let total=0;
 for (let i=0;i<datatable.length;i++) { total +="dataTable[i].price*(1-dataTable[i].qty/100);" } this.setstate({ total:total, datatable:datatable }); console.log('test0'); price(data) let name="this.state.valueProducts.value;" for(let i="0;i<data.length;i++)" if (name="==data[i].name)" return (data[i].price); funccustomers () props="{" properties: this.state.customers }; selectcustomers(props); console.log('test1'); funcproducts this.state.products selectproducts(props); console.log('test2'); add(e) e.preventdefault(); e.persist(); datatable="this.state.dataTable" ; fetch(' products api') .then((response)> {
 return response.json()
 .then((data) => {
dataTable.push({
 name: this.state.valueProducts.value
 price: this.price(data),
 qty: document.getElementById('formControlText').value
});
 let discount = document.getElementById('formControlText').value / 100;
 let total = 0;
 for (let i = 0; i < dataTable.length; i++) {
 total += dataTable[i].price
}
 total = total * (1 - discount);
this.setState({
 total: total
});
});
});
}
 changeStateCustomer = (valueCustomer) => {
this.setState({valueCustomer:valueCustomer});
};
 changeStateProduct = (valueProduct) => {
this.setState({valueProducts:valueProduct});
};
 loadData() {
 let customers=[],
 products = [];
fetch('/api/products')
 .then((response) =>
response.json()
 .then((data) =>{
 for(let i=0; i<data.length;i++) products[i]="data[i].name" this.setstate({products:products}) }) ); fetch(' api customers') .then((response)>
response.json()
 .then((data) =>{
 for(let i=0; i<data.length;i++) customers[i]="data[i].name;" this.setstate({customers:customers}) }) ) } render() { return ( <div classname="container">
 <pageheader>Create Invoice</pageheader>
 <form onsubmit="{this.add}">
 <formgroup controlid="formControlText" style="{{width:20+'%'}}">
 <controllabel>Discount (%)</controllabel>
<formcontrol>
</formcontrol></formgroup>
<label>Customer</label>
 <select name="form-field-name" style="{{width:40+'%'}}" value="{this.state.valueCustomer}" onchange="{this.changeStateCustomer}" options="{this.funcCustomers()}">
 Add products
</select>
 <button type="submit" bsstyle="primary">Add</button>
</form>
 <loadtabledata focus="{this.nameAutoFocus}" discount="{this.changeDiscount}" data="{this.state.dataTable}">
 </loadtabledata><table responsive>
<thead>
the <tr>
<th>Name</th>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
</table>
<pageheader>Total:
 <numberformat displaytype="{'text'}" value="{this.state.total}" decimalseparator="{'.'}" decimalscale="{2}/">
</numberformat></pageheader>
 <button bsstyle="success" onclick="{this.sendForm}">
Submit
</button>
 </data.length;i++)></data.length;i++)></datatable.length;i++)>
) } }

Here's added input
Here is input
import React from 'react';
ModalDelete import from './modals/modal_delete';
import { FormGroup,FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function (props) {
 let datas = props.data;
 let count=-1;
 let listDatas = datas.map((data) => {
count++;
 return {transform(data, props.discount props.focus)};
});
 return (
{listDatas}
);
}

function transform(mass, discount, focus) {
 let props = [];
 let count=0;
 for (let key in mass) {
props.push(mass[key])
}
 // props.push(<modaldelete loaddata="{loadData}">);
 return props.map((prop) => {
 if (count===2) return (

 <formgroup controlid="formControlText" style="{{width:20+'%'}}">
 <formcontrol type="text" defaultvalue="{prop}" bsclass="lg" onchange="{discount}" autofocus="{focus}" key="{1000}">
</formcontrol></formgroup>

 ); console.log('test4');
count++;
 return {prop};
});
}</modaldelete>

June 10th 19 at 14:38
1 answer
June 10th 19 at 14:40
Solution
Every time when you change value in input, it is immediately recorded in the state and then rendered, so reset the focus.

Find more questions by tags React