小程序除了一般的下單填寫信息的頁面里面需要用到input組件
像搜索??撵术、條件查詢嚼黔、點(diǎn)評這些頁面也會用到input組件
異常結(jié)果：
輸入一段英文盖呼，不點(diǎn)鍵盤確認(rèn)按鈕蠢挡，直接點(diǎn)擊搜索弧岳，這時候查詢出來的結(jié)果，就沒有獲取到輸入查詢條件
異常原因分析：
本小程序用的Taro框架业踏，原生小程序道理一樣
輸入框用的是 Input組件禽炬，下面按鈕是View寫的
因?yàn)檫@是新加的需求，一開始沒有輸入查詢這個要求勤家，所以一開始別的同事用的View寫的按鈕
image.png
錯誤代碼示例：
<Input className='searchBox-code' name='code' value={code} cursorSpacing="100" adjustPosition={true} onInput={this.handleCodeInput} type='text' placeholder='請輸入?yún)f(xié)議/優(yōu)惠代碼' maxLength='50' placeholderStyle='color:#cccccc;' />
<View onClick={this.goList} className="songFont edgeGap ">搜索</View>
image.png
不管是安卓手機(jī)和蘋果手機(jī)腹尖，在輸入英文的時候，如1??伐脖，如果不點(diǎn)2??處热幔，
Input組件的onInput事件是不會觸發(fā)的，所以我們?nèi)庋劭吹降倪@幾個字母其實(shí)程序是沒有記錄的讼庇，這時候如果直接點(diǎn)擊搜索绎巨，會觸發(fā)onInput事件和搜索事件，但這兩個是異步的巫俺，可能會發(fā)生參數(shù)沒有獲取到就查詢认烁，導(dǎo)致結(jié)果不正確
正確代碼示例：
<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='請輸入?yún)f(xié)議/優(yōu)惠代碼' maxLength='50' placeholderStyle='color:#cccccc;' />
<Button className="songFont edgeGap " plain type='default' formType='submit'>搜索酒店</Button>
</Form>
formSubmit(e){
console.log(e.detail.value.code) //輸入框的值
}
通過表單能實(shí)時獲取到輸入的值，就不會出現(xiàn)獲取不到值的情況了
