如何使用试剂在 ClojureScript 上进行正确的双向绑定？答案

【问题标题】：How to have proper bidirectional binding on ClojureScript with Reagent?如何使用试剂在 ClojureScript 上进行正确的双向绑定？
【发布时间】：2017-07-14 23:19:20
【问题描述】：

我正在为 ClojureScript/Reagent 的 React Toolbox 编写一个包装器，名为 Reagent Toolbox。在 React Toolbox 中，an input component 是这样使用的：

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

我围绕该 React 组件创建了一个 Reagent 组件，如下所示：

(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

我做错了什么？我错过了什么？

【问题讨论】：

标签： reactjs clojurescript reagent react-toolbox

【解决方案1】：

我过去也遇到过这个错误，但我花了一段时间才想起为什么会这样。

This SO post 解释了根本问题。这发生在 Reagent 中，因为所有 Reagent 重新渲染都是异步的。因此，每个受控输入都会在 DOM 上显式设置 .valid 属性（取决于浏览器，它会将光标放在末尾）。

This Reagent issue 深入探讨了这个问题，最后为 Reagent 的输入合并了一个解决方案。

简短的回答似乎是在这里简单地使用reagent/adapt-react-class 似乎是不够的。看起来您将不得不包装适应的类并通过检查 selectionStart 和 selectionEnd 并重新定位光标来应用相同的修复。

【讨论】：