如圖:需要清除search搜索框內容
antd的transfer穿梭框組件未提供入口修改input框的值。
2種方法修改。
1、直接操作dom元素設置值(不推薦)
useEffect(() => {const searchInput = document.querySelector('.ant-transfer-list-search input'); if (searchInput) {searchInput.value = ''; // 修改搜索框的值}}, []);
需要自己去定位input元素位置,如圖:
2、變量控制重新渲染組件
使用state變量控制組件是否展示,默認不展示,100ms后展示出來即可。
原理:源碼中通過transfer組件中的list.js中的filterValue保存的搜索框中的內容。
但是又沒有暴露修改此值的屬性,所以只能通過卸載再掛載的方式清除filterValue的值。