CODEWITHSUNDEEP
javascriptnode.jsreactjs
Randy Quackers
Randy Quackers

Reputation: 715

React unwanted submit on every character inputed

Everytime I enter a character in my input textfield, it automatically presses the submit button attached to it.

I would like to enter all the characters in the input textfield before it submits.

It's this part that is causing a problem:

<input type="text" ref={this.input} onChange={this.handleChange} />

<input type="submit" className="text-success col-offset-3" onClick={console.log("clicked")} value="Add Stock"/>

For example, it will console.log "clicked" everytime I enter a character in the input textfield without me actually clicking the button

Does any one of you guys know why?

Upvotes: 0

Views: 665

Answers (2)

Ismael Padilla
Ismael Padilla

Reputation: 5566

<input type="submit" className="text-success col-offset-3" onClick={console.log("clicked")} value="Add Stock"/>

This is calling the console.log function every time the component is rendered. It's probably why you think the form is being submitted every time you type something. You should do something like this:

<input type="submit" className="text-success col-offset-3" onClick={() => console.log("clicked")} value="Add Stock"/>

You can find some more information in the React docs: Handling Events.

Explanation:

The reason why you do this, is that in React you don't include the parenthesis on your events. So in html you would do:

Regular HTML:
<button onclick="myFunc()">Button</button>

But in React you need to do:

JSX:
<button onClick={myFunc}>Button</button>

(Note that in class components you may need to use this.myFunc).

If you use the parenthesis in React, you're actually just calling the myFunc function when that piece of code is run:

This is wrong:
<button onClick={myFunc()}>Button</button>

Now, what happens if the function needs to take some parameters? i.e. what you need myFunc to be called with some number like 123 for example? This is covered in the docs (see Passing Arguments to Event Handlers ), there are two or three ways to go about this:

Create an auxiliary function that calls the function you want to call:

Kind of messy, but I'm including this since it's a valid alternative:

// Somewhere else in your component...
myAuxFunc = () => {
    myFunc(123)
}

// Inside your render...
<button onClick={this.myAuxFunc}>Button</button>

Use an arrow function:

This is somewhat similar to creating an auxiliary function. Actually we are doing the same thing, we are creating a function that calls the function we're actually interested in, only that we're not naming it (it's an anonymous arrow function) and we're creating it on the spot:

<button onClick={() => myFunc(123)}>Button</button>

This can be tricky, but it is essentially the same as the first alternative I mentioned. I'm telling react that when the button is clicked, I want the following function to be called: () => myFunc(123). It's a function that takes no parameters, and when it is called, it will call myFunc(123).

(Class components) Use the bind function to bind the this keyword:

This is useful in class components when you want to call functions defined in your components so I'm including this here for completeness. It's not actually useful when you want to call a function like console.log. 

<button onClick={this.myFunc.bind(this, 123)}>Button</button>

Upvotes: 3

AlexanderKaran
AlexanderKaran

Reputation: 525

Your passing in console.log() so every time the page re-renders the function gets called. As your calling it by passing it in like that.

You need to pass it in like this:

onClick={() => console.log("Clicked")}

Upvotes: 5

Related Questions