clojurescript + проблема с реагентом

Проблема в том, что вы передаете a (atom 0) элементу управления atom-input: [atom-input a]. Это привело к тому, что одно и то же значение атома было разделено между вашими вкладками.

Если вы не хотите делиться значением, вам нужно изменить a на карту: a (atom {}) и передать карту и индекс в atom-input, например:

(defn atom-input [value index]
  [:input {:type "text"
           :value (or (get @value index) "")
           :on-change #(swap! value assoc index (-> % .-target .-value))}])

(defn simple-tab [index]
  (let [pg-index (atom 1)
        a (atom {})]
    (fn []
      [:div
       [:h4 (str "index: " @index)]
       [atom-input a @index]])))

ИМХО, лучший подход - использовать курсор, поэтому вам не нужно передавать индекс и всю карту в atom-input, например:

(defn atom-input [value]
  [:input {:type "text"
           :value (or @value "")
           :on-change #(reset! value (-> % .-target .-value))}])

(defn simple-tab [index]
  (let [pg-index (atom 1)
        a (atom {})]
    (fn []
      [:div
       [:h4 (str "index: " @index)]
       [atom-input (reagent/cursor [@index] a)]])))

Я думаю, здесь есть пара проблем, потому что вы смешиваете данные приложения (состояние) и данные логики отображения (то есть DOM). Если вы сохраните две разные вещи, то есть поддерживаете состояние вашего приложения в одном атоме и данные, относящиеся к отображению компонентов, в другом, тогда все может быть немного чище.

Компоненту простой вкладки не нужно ничего знать о состоянии вкладки. Ему просто нужно знать о состоянии приложения, то есть о значении, введенном / сохраненном через атомный ввод. Поэтому вместо того, чтобы передавать ему индекс, передайте ему атом, который вы хотите использовать. это потребует некоторой логики более высокого уровня для определения вызова. например, если у вас было несколько вкладок, у вас может быть что-то вроде

(condp = @index
  0 [simple-tab tab0-atom]
  1 [simple-tab tab1-atom]
  ...
  n [simple-tab tabn-atom])

или вы можете изменить простую вкладку так, чтобы значение, переданное, то есть значение индекса, использовалось в качестве ключа в состоянии приложения - курсор был бы самым простым, я думаю, т.е.

(def app-state (r/atom {:tabs {0 nil 1 nil}}})

(defn simple-tab [index]
  (let [val-cur (r/cursor app-state [:tabs index])]
    [atom-input val-cur]))

Вы используете компонент form-2, то есть компонент, возвращающий функцию.

Подробнее здесь: https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-2--a-function-returning-a-function

При этом вызывается только возвращенная функция, поэтому ваши входные атомы используют один и тот же атом.

Кроме того, вы должны использовать тот же аргумент во внутренней функции

 (defn simple-tab [index]
      (let [pg-index (atom 1)
            a (atom {})]
        (fn [index]
          [:div
           [:h4 (str "index: " @index)]
           [atom-input a @index]])))

В вашем случае вы передаете атом, поэтому это не важно, но в будущем у вас может быть ошибка, если вы это забудете.

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

Вы также можете называть свои вкладки следующим образом: product: users и использовать мультиметод для отображения правильной вкладки на основе выбранной. Это легче читать и легче добавлять новые вкладки в будущем.