Why is onSubmit function not called during render even if we don't use an inline function to ca-CodePudding

I am trying to create a simple form using React using the below code:

<div className="wrapper">
  <h1>How About Them Apples</h1>
  <form onSubmit={handleSubmit}>
    <fieldset>
      <label>
        <p>Name</p>
        <input name="name" />
      </label>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
</div>

Now, what I want know is we are not using any inlien function to call the on-submit handler, but it is not being called during render like it would be called if I had done the same for an on-click-handler like:

<button onClick={onClickHandler}>Button</button>

Am I missing something ?

CodePudding user response：

Does this make what you want?

function onClickhandler(event) {
  event.preventDefault()
  console.log('Submit!')
}

<div className="wrapper">
  <h1>How About Them Apples</h1>
  <form>
    <fieldset>
      <label>
        <p>Name</p>
        <input name="name" />
      </label>
    </fieldset>
    <br />
    <button onClick={onClickhandler(event)}> Submit</button>
  </form>
</div>

CodePudding user response：

The onSubmit is not working because you didnot create a function. A function in a simple definition is what you define to do something for you. if you create a function like this:

const onClickHandler =()=>{
console.log('You clicked me')
}

And then you call it in your button like this Button, it will log 'You clicked me to the console' whenever you clicked on that button. This is because you create a function called onClickHandler which will do something for you and i.e log "You clicked me" to the console.

But if you call it like this Button without creating a function that will do something. Then the button will do nothing, it will not work.

To do an inline function on the button so that it will do something for you, you have to do it like this: <button onClick={()=> console.log('You clicked me')}>Button

And it will work because we define the function directly inside the button instead of defining the function before creating a button.

All this also apply with onSubmit. If you didnot create a function that will do something for you or if you didnot use the function directly by adding ()=> then your onSubmit form will not submit all your input. Forthe onSubmit to work, you should do something like this:

<form onSubmit={()=> console.log('You submitted your form')}>
  //All input goes here
</form>

Note: If what you want to do inside the function is more than, then dont forget to do both inline function and seperate function like this: for inline

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

()=>{
console.log('abc....')
console.log('abc....')
}

for seperate function

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const onSubmit()=>{
console.log('abc...')
console.log('abc...')
}