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

Any jquery wrappers to use to access by selectors?

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

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

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

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

the event object passed into the function is a React event

https://reactjs.org/docs/events.html

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

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

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

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

for it to invoke

like people used to do in angular 1

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

yeah, that’s how react does it too

ah

that got me into all sorts of messes in angular 1

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

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

no, you pass functions

that’s what onClick is

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

ok

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

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

ok

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

and that’s how he’s done it 🙂

thanks

sure thing

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

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

Is there any API for this routine task?

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

I've used https://github.com/reagent-project/reagent-forms before

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

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

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

Thank you