[Small program] input input two-way data binding

In the applet, the data in the input tag is one-way binding :

<input
	 type="number"
	 bindinput="inputRealmoney"
	 value="{
     
     { amount }}"
	 placeholder="请输入金额"
/>

As in the above code, we bind the data amount of the input box and bind the input event inputRealmoney.

The value attribute is bound to the initial content of the input box.

If you input data, it will not be bound to the amount: 123 is e.detail.valuethe input data; 500 is amountthe initial data bound to the value.

Solution: Set the amount in the event of bindinput.

Note, do not use arrow functions with this.

function inputRealmoney(e) {
    
    
  this.setData({
    
    
    //e.detail.value是字符串
    amount: parseInt(e.detail.value)
  })
  if (parseInt(e.detail.value) > enableWithdrawalAmount.value) {
    
    
    this.setData({
    
    
      amount: enableWithdrawalAmount.value
    })
  }
}

Note that assignment statements can also:

amount.value=parseInt(e.detail.value)

reference

WeChat applet two-way data binding_WeChat applet two-way binding_Chang Mingming's blog-CSDN blog

WeChat applet, two-way binding of input content - Tencent Cloud Developer Community - Tencent Cloud (tencent.com)

Small program input realizes two-way data binding - short book (jianshu.com)