我的問題：今天先根據手機號查詢一個使用者，根據文件引用Input中的Search，我添加了一個樣式，發現輸入框無法輸入內容，

程式碼：

 return (
   <div>    
     <Search
     style={{ width: 300,float: "right" }}
     placeholder="手機號"
     onSearch={value => this.findAppUserByPhoneNo(value)}
     onChange={this.onChangePhoneNo}
     value={searchText}
     enterButton
    />
    <Table .../>
    <Pagination .../>
</div>

效果圖：滑鼠點選白色輸入框無法沒有反應，無法輸入內容，點選藍色部分可以輸入，但是這樣的客戶體驗不好

解決辦法：

在搜尋框的前面新增一個東西，例如一個button或者span標籤；個人覺得原因是：是受float:"right"影響 ，大家有不同意見的告訴我！

render(
  <div>
    <Button type="primary" onClick={this.userFilter}>
     全部使用者
    </Button>
    <span style={{ marginLeft: 20,color: "#1890FF" }}>總人數:{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表單或者父節點是否使用了 key=Math.random() 之類給元件新增唯一值的程式碼。

以上這篇解決ant Design Search無法輸入內容的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。