如何使用試劑在ClojureScript上進行適當的雙向結合？

Question

我正在爲ClojureScript/Reagent 寫React Toolbox的包裝。在陣營工具箱，有是一個的像這樣使用an input component：

<Input type='text' 
     label='Name' 
     name='name' value={this.state.name} 
     onChange={this.handleChange.bind(this, 'name')} 
     maxLength={16 } /> 

我創造了這樣的周圍做出反應成分試劑成分：

(def input (reagent/adapt-react-class (.-Input js/ReactToolbox))) 

，這樣我可以這樣使用它：

[reagent-toolbox.core/input {:label  "Name" 
          :name  "name" 
          :type  "text" 
          :value  @name 
          :max-length 16 
          :on-change (fn [value event] (reset! name value))}]  

但與React版本不同，在Reagent版本中，每次按下輸入按鍵都會導致組件重新渲染，使光標跳轉到最後。你可以在這裏體驗到這種效果：http://reagent-toolbox-docs.dashman.tech/input

Whan am I doing wrong？我錯過了什麼？

Answer 1

我在過去也遇到過這個錯誤，但是花了我一段時間纔想起發生這種情況的原因。

This SO post解釋了根本問題。這發生在試劑中，因爲全部試劑重新呈現是異步的。因此，每個受控輸入都會在DOM上顯式設置.valid屬性（根據瀏覽器的不同，該屬性會將光標置於最後）。

This Reagent issue詳細介紹了這個問題，並最終合併了試劑輸入的解決方案。

簡單的答案似乎是簡單地使用reagent/adapt-react-class這裏似乎不夠。看起來您必須通過檢查selectionStart和selectionEnd並重新定位光標來包裝改編的課程並應用相同的修補程序。