Как обеспечить правильную двунаправленную привязку к ClojureScript с помощью Reagent?

Я пишу оболочку для React Toolbox для ClojureScript/Reagent под названием Набор инструментов для реагентов. В React Toolbox есть компонент ввода, который используется следующим образом:

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

Я создал компонент Reagent вокруг этого компонента React следующим образом:

(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://regent-toolbox-docs.dashman.tech/input

Что я делаю неправильно? Что мне не хватает?


reactjs clojurescript reagent react-toolbox
person pupeno    schedule 24.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я также сталкивался с этой ошибкой в ​​прошлом, но мне потребовалось некоторое время, чтобы вспомнить, почему это происходит.

Это сообщение SO объясняет основную проблему. Это происходит в Reagent, потому что все повторные рендеры Reagent являются асинхронными. Поэтому каждый управляемый ввод явно устанавливает атрибут .valid в DOM (который, в зависимости от браузера, помещает курсор в конец).

Эта проблема с реагентом содержит самые подробные сведения об этой проблеме и, наконец, объединяет решение для входов Реагента.

Короткий ответ, кажется, заключается в том, что простого использования reagent/adapt-react-class здесь недостаточно. Похоже, вам придется обернуть адаптированный класс и применить то же исправление, проверив selectionStart и selectionEnd и переместив курсор.

person Davin Tryon    schedule 24.02.2017