Recently, there is a problem in deleting the input input amount of the projects that have been launched. All kinds of searches on the Internet have not found what they want. Today, I will take the react framework as an example for code dedication, and I will write out the requirements and solutions, hoping to be useful to my friends.

If there is a better way to achieve it, please give me some advice!

I. demand

1. Only numbers are allowed

2. Only one decimal point can be entered, and there can be only one decimal point. At most two decimal places can be entered after it.

3. Amount in words

4. Number of digits of control amount input

II. Implementation method

 constructor Chinese Code:

constructor(props) {
       super();

        this.state = {
               saveMoney:' ' ,input Initial value in box
               bigText:' ',Capitalization amount
        };
         this.handleChangeSave= this.handleChangeSave.bind(this);
}


render Chinese Code:

<input type="text" id='box' 
    value={this.state.saveMoney}
    onChange={this.handleChangeSave} 
  />
<p className={styles.daxie}>{this.state.bigText}</p>

handleChangeSaveMethod: 
handleChangeSave(e) { Conversion method of amount in words: function DX(n) { var fraction = ['horn', 'branch']; var digit = ['Zero', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine']; 
var unit = [['element', 'ten thousand', 'Billion'], ['', 'Ten', 'Bai', 'Thousand']]; var head = n < 0 ? 'owe' : ''; 
n = Math.abs(n); var s = ''; for (var i = 0; i < fraction.length; i++) { s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/Zero./, ''); } s = s || 'whole'; 
n = Math.floor(n); 

for (var i = 0; i < unit[0].length && n > 0; i++) 
{ var p = ''; for (var j = 0; j < unit[1].length && n > 0; j++) 
{ p = digit[n % 10] + unit[1][j] + p; n = Math.floor(n / 10); }
 s = p.replace(/(Zero.)*Zero $/, '').replace(/^$/, 'Zero') + unit[0][i] + s; } 
return head + s.replace(/(Zero.)*Zero element/, 'element').replace(/(Zero.)+/g, 'Zero').replace(/^whole $/, 'Zero integer'); } 
const bigText= DX(num); 



const data = e.target.value; Get the value of the input 
const num = data.replace(/,/g, '');Change the input comma to null 

var reg = /^[0-9\.\d]+$/; Whether the input of regular matching conforms to the specification 
if (reg.test(num)) 
    { if (num.indexOf('.') > '-1') 
       { const decimal = num.split('.')[1]; 
         const wholeNumber =num.split('.')[0]; 
           if(wholeNumber == ''){ 
               this.setState({ saveMoney: '0'+'.'+decimal, If it is blank before the decimal point, it defaults to 0. 
               bigText: bigText });}
                     else{ 
 if (num >= 1000 && decimal.length < 3&& num.length < 15) 
         { this.setState({ saveMoney: parseInt(num)+'.'+decimal, bigText: bigText }); }
       else if (num >= 0 && num < 1000 && decimal.length < 3) 
               { this.setState({ 
                      saveMoney: parseInt(num)+'.'+decimal, 
                      bigText: bigText }); } } } 
             else { if(num >= 0 && num.length < 12){ 
                   this.setState({ 
                            saveMoney: num, 
                            bigText: bigText }); } } } 
             else if (num == '') 
                   { this.setState({ 
                             saveMoney: '', 
                             bigText: '' }); }}