解決ant Design Search無法輸入內(nèi)容的問題
更新時間：2020年10月29日 09:18:05 作者：smile&$
這篇文章主要介紹了解決ant Design Search無法輸入內(nèi)容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我的問題：今天先根據(jù)手機號查詢一個用戶，根據(jù)文檔引用Input中的Search，我添加了一個樣式，發(fā)現(xiàn)輸入框無法輸入內(nèi)容，
代碼：
return (
<div>
<Search
style={{ width: 300, float: "right" }}
placeholder="手機號"
onSearch={value => this.findAppUserByPhoneNo(value)}
onChange={this.onChangePhoneNo}
value={searchText}
enterButton
/>
<Table .../>
<Pagination .../>
</div>
效果圖：鼠標(biāo)點擊白色輸入框無法沒有反應(yīng)，無法輸入內(nèi)容，點擊藍色部分可以輸入，但是這樣的客戶體驗不好
解決辦法：
在搜索框的前面添加一個東西，例如一個button或者span標(biāo)簽；個人覺得原因是：是受float:"right"影響 ，大家有不同意見的告訴我！
render(
<div>
<Button type="primary" onClick={this.userFilter}>
全部用戶
</Button>
<span style={{ marginLeft: 20, color: "#1890FF" }}>總?cè)藬?shù):{total}</span>
<Search
style={{ width: 300, float: "right" }}
placeholder="手機號"
onSearch={value => this.findAppUserByPhoneNo(value)}
onChange={this.onChangePhoneNo}
value={searchText}
enterButton
/>
<Table .../>
<Pagination .../>
</div>
)
效果：
補充知識：Antd form表單中input失效，無法輸入字符串，只能輸入單個字符
問題描述
刪掉{getFieldDecorator(name, {})這一段 表框可以正常輸入。
解決辦法
檢查form表單或者父節(jié)點是否使用了 key=Math.random() 之類給組件添加唯一值的代碼。
以上這篇解決ant Design Search無法輸入內(nèi)容的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理
這篇文章主要介紹了vue中封裝axios并實現(xiàn)api接口的統(tǒng)一管理的方法，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要為大家介紹了vue導(dǎo)出excel表格并支持樣式及行高修改，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
凡是做SPA的項目,特別是移動端的SAP項目,首屏加載速度必定是一個繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了解決vue無法偵聽數(shù)組及對象屬性的變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了vue中使用axios請求post接口,請求會發(fā)送兩次原因解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了vue中的axios配置及接口請求路徑api配置方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Reflect可以操作對象使用， proxy可以代理對象，但沒有找到為啥有時一定要在Proxy代理方法中使用Reflect，這篇文章主要介紹了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以參考下2023-04-04
antd中table展開行默認(rèn)展示,且不需要前邊的加號操作
這篇文章主要介紹了antd中table展開行默認(rèn)展示,且不需要前邊的加號操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue.js 父向子組件傳參的實例代碼,需要的朋友可以參考下2017-10-10