優維低程式碼：事件與互動

在上一篇文件，我們成功對接了後臺介面，獲取平臺的使用者資料並渲染到表格當中。

下面，我們嘗試通過事件來實現頁面互動。

思考這麼一個業務需求：當平臺使用者數比較多的時候，通過上下翻頁來查詢使用者是一件很耗時的事情。希望可以通過使用者的 id 快速檢索出使用者資訊。

可以簡單畫出業務流程圖：

因此，在使用者輸入搜尋關鍵字後，需要通知並觸發後臺請求，請求到新資料後重新渲染表格。這樣的頁面及頁面互動，我們可以藉助構件的 事件 來實現。

# 新增輸入框

搜尋 general-search，新增搜尋框構件，設定 placeholder 為 搜尋使用者ID，設定 shouldUpdateUrlParams 為 false。

選擇輸入框構件，我們先在 Document 標籤頁檢視它有什麼事件：

filter.update 事件是在點選搜尋（或回車）時觸發，我們先來做下試驗。

給構件的事件加入以下配置：

該配置為構建的 filter.update 事件增加一個觸發動作 console.log，表示在瀏覽器控制檯列印日誌。<% EVENT.detail%> 藉助這個表示式我們可以拿到事件詳情。

事件是一種 觸發 & 響應 機制。使用者的互動會觸發構件的特定事件，例如每次在搜尋框輸入一個字元，都會觸發 query.change事件，按下搜尋或者鍵盤迴車，會觸發 filter.update。每個構件擁有的事件是不一樣的，根據構件自身特點來決定。

當事件觸發時，我們可以通過 事件處理器 對事件進行響應，分以下三種：

• 執行內建動作（actions），例如 console.log 等
• 呼叫介面（useProvider），請求介面獲取資料；
• 指定構件（target），例如 開啟某個彈窗構件，更新表格構件的資料來源等。

重新構建並推送。

重新整理後用戶列表頁多了一個搜尋框，在搜尋框輸入 easyops 並回車，接著在開發者工具裡開啟（chrome、edge等瀏覽器可以按F12鍵），找到 console 標籤頁。

可以看到已經把事情詳情打印出來了，包含了我們所屬輸入的搜尋關鍵字：

# 實現搜尋功能

在瞭解了事件的機制後，我們可以思考一下如何實現開頭的業務流程。

首先，修改表格構件 id 屬性為 user-table。

構件的 id 是它在頁面中的唯一標識，可以通過 #your-brick-id 的方式指定構件。id 命名遵循 kebab-case（短橫線）命名法則。

接著，為搜尋框的 filter.upate 事件新增新的事件處理器：

構建並推送後，重新整理使用者列表頁，輸入搜尋關鍵字並回車，觀察表格展示的變化。

表格中的資料已經根據使用者搜尋產生了變化，成功實現了使用者搜尋功能！