最近一直在研究小程序，其中也有一些设计不是很人性化，或者是我打开的方式不对

其中一个问题就是，聊天室的点击send按钮，发送信息，同时清空输入框，然而，小程序中却没法直接去获取到指定input然后清空value，只能通过间接的方式去操作它

以下是我个人总结出来的一个方法，可能不是最好的，但是至少可以实现这个要求

直接上代码：

wxml

1
2
3
4
5
<view class="sendmessage">
   <input id="message" bindinput="bindChange" wx:if='{{flag==false}}' placeholder="请输入"/>
   <input id="message" bindinput="bindChange" wx:if='{{flag==true}}' placeholder="请输入"/>
   <button bindtap="add">发送</button>
 </view>

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Page({
  data: {
    message : '',
    text : text,
    flag: false
  },
  bindChange: function(e) {
        message = e.detail.value
        console.log( e.currentTarget )
  },
  //事件处理函数
  add: function(e) {
    var st;
    websocket.send(user.nickName +" : "+ message);
    if( this.data.flag ){
        st = false;
    }else {
        st = true;
    }
    this.setData({
      flag: st
    })
  }
}）

主要是data里设置了一个flag的属性，当点击send的时候，判断一下flag，然后对其进行取反，从而控制两个input的显示和隐藏