Fork me on GitHub
#reagent
<
2018-12-21
>
manas_marthi09:12:03

Hi , how to access form field value in a :on-click function

manas_marthi09:12:28

Any jquery wrappers to use to access by selectors?

lilactown14:12:05

@manas.marthi you probably don’t want to use jquery or selectors

lilactown14:12:36

if it’s the value of the field that is clicked, you can access it in the callback you give to the :on-click function

lilactown14:12:48

(defn handle-click [event]
  (println (.. event -target -value)))

[:input {:on-click handle-click}]

lilactown14:12:05

the event object passed into the function is a React event

koala punch16:12:33

hi, i’m trying ot follow the react tic tac toe tutorial and port to reagent

koala punch16:12:18

does reagent have an equivalent of this.props.onClick()

koala punch16:12:31

all the examples i’ve found are on dom elements but not react components

koala punch16:12:24

it looks like i might have to pass a function in as a paramter

koala punch16:12:26

for it to invoke

koala punch16:12:30

like people used to do in angular 1

lilactown16:12:40

your reagent component (a function) can take in any kind of data and use it, e.g. a function

lilactown16:12:47

yeah, that’s how react does it too

koala punch16:12:56

that got me into all sorts of messes in angular 1

koala punch16:12:05

thats why the angular output parameters arrived, the reverse the dependency

koala punch16:12:17

i think in react you dont pass functions through exactly, but invoke them indirectly

lilactown16:12:23

no, you pass functions

lilactown16:12:28

that’s what onClick is

rlander16:12:44

just remember components are plain functions.. you pass arguments.

lilactown16:12:18

e.g. you’d render your Square component like so:

<Square onClick={function () { alert("clicked!") }} />

koala punch16:12:23

i found some guy who has done the same thing as me online

koala punch16:12:27

and that’s how he’s done it 🙂

koala punch16:12:56

it’s pretty mad, you can define a component as a variable in a let block!

manas_marthi16:12:48

Hi, I want to trigger validation fn on click of submit and go through individual fields and validate them and display errors along with style changes like turning border color to red

manas_marthi16:12:40

Is there any API for this routine task?

madstap16:12:46

There are libraries for this, nothing built-in to reagent

4
lilactown17:12:30

@manas.marthi the first step is keeping your state inside of an atom

lilactown17:12:56

then, when the user clicks submit, it you can run your logic to validate the data contained in the atom

4
lilactown17:12:21

if there are any invalid fields, you can further update your state atom to cause your form to re-render with error state

manas_marthi17:12:39

Thank you

👍 4