Как изменить входные данные в реагенте? - PullRequest
Новая
       101

Как изменить входные данные в реагенте?

0 голосов
/ 19 марта 2020

Я новичок в React, Clojure, ClojureScript и Reagent, поэтому, возможно, мне не хватает чего-то простого.

Я изменяю код отсюда (https://reagent-project.github.io) и стандартная страница ClojureScript hello-world для получения простой страницы входа. Но всякий раз, когда я вписываю что-то в поля имени пользователя и пароля, ничего не происходит. Почему это так? 

(ns cljs_test.core
    (:require [reagent.core :as reagent :refer [atom]]))

(enable-console-print!)

;; define your app data so that it doesn't get over-written on reload

(defonce app-state (atom {:text "Hello world!"}))

; define Reagent component `atom-input`
(defn atom-input [state]
  [:input {:type "text"
    :style {:display "block"}
    :placeholder "Username"
    :value @state
    :on-change (fn [event]
      reset! state (-> event .-target .-value))}])
; define Reagent component `atom-pw`
(defn atom-pw [state]
  [:input {:type "password"
    :style {:display "block"}
    :placeholder "Password"
    :value @state
    :on-change (fn [event]
      reset! state (-> event .-target .-value))}])

Ниже мы вызываем два компонента Реагента atom-input и atom-pw, используя квадратный скобочный «вызов функции» . 

(defn loginForm [someUrl]
  (let [unVal (atom "") pwVal (atom "")]
    (fn []
      [:div
        [:p "Username: " @unVal]
        [:p "Password: " @pwVal]

        ; Reagent does "magic" here to transform any vector beginning
        ; with a function into a real function call
        [atom-input unVal]             ; line 32
        [atom-pw pwVal]                ; line 33

        [:button "to-do submit button"]])))

(defn app []
  [:div
    [:div
      [:h1 (:text @app-state)]
      [:h3 "Edit this and watch it change!"]]
    [loginForm ""]])

(reagent/render-component [app]
                          (. js/document (getElementById "app")))

(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
)

Заранее спасибо за ответы.

1 Ответ

1 голос
/ 19 марта 2020

Отсутствующие скобки. Должно выглядеть так: 

(defn atom-input [state]
  [:input {:type        "text"
           :style       {:display "block"}
           :placeholder "Username"
           :value       @state
           :on-change   (fn [event]
                          (reset! state (-> event .-target .-value)))}])

Парены в Clojure выполняют вызов функции. Без них reset! и state игнорируются. Это выражение: 

(-> event .-target .-value)

создаст значение, которое затем будет возвращено анонимной функцией для :on-change. Однако это значение игнорируется.

...