2

我正在为 ClojureScript/Reagent的React Toolbox编写一个名为Reagent Toolbox的包装器。在 React Toolbox 中，有一个这样使用的输入组件：

<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

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

4

1 回答 1

1

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

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

这个 Reagent issue对这个问题进行了最详细的介绍，并最终合并了 Reagent 输入的解决方案。

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

于 2017-02-24T08:52:19.043 回答