小程序搜索获取不到输入框的值，异步导致+解决方案

小程序除了一般的下单填写信息的页面里面需要用到input组件
像搜索?、条件查询、点评这些页面也会用到input组件

异常结果：

输入一段英文，不点键盘确认按钮，直接点击搜索，这时候查询出来的结果，就没有获取到输入查询条件

异常原因分析：

本小程序用的Taro框架，原生小程序道理一样
输入框用的是 Input组件，下面按钮是View写的
因为这是新加的需求，一开始没有输入查询这个要求，所以一开始别的同事用的View写的按钮

image.png

错误代码示例：

<Input className='searchBox-code' name='code' value={code} cursorSpacing="100" adjustPosition={true} onInput={this.handleCodeInput} type='text' placeholder='请输入协议/优惠代码' maxLength='50' placeholderStyle='color:#cccccc;' /><View onClick={this.goList} className="songFont edgeGap ">搜索</View>

image.png

不管是安卓手机和苹果手机，在输入英文的时候，如1⃣️，如果不点2⃣️处，Input组件的onInput事件是不会触发的，所以我们肉眼看到的这几个字母其实程序是没有记录的，这时候如果直接点击搜索，会触发onInput事件和搜索事件，但这两个是异步的，可能会发生参数没有获取到就查询，导致结果不正确

正确代码示例：

<Form onSubmit={this.formSubmit.bind(this)} >  <Input className='searchBox-code' name='code' value={code} cursorSpacing="100" adjustPosition={true} onInput={this.handleCodeInput} onBlur={this.onBlur} type='text' placeholder='请输入协议/优惠代码' maxLength='50' placeholderStyle='color:#cccccc;' />  <Button className="songFont edgeGap " plain type='default' formType='submit'>搜索酒店</Button></Form>formSubmit(e){    console.log(e.detail.value.code)  //输入框的值}

通过表单能实时获取到输入的值，就不会出现获取不到值的情况了

原著是一个有趣的人,若有侵权,请通知删除