如何使用试剂在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并重新定位光标来包装改编的课程并应用相同的修补程序。