ReactJS: OnChange handler auto submitting data before onClick

react input onchange get value
react get form values on submit
react-select onchange
react get input value on button click
formik
in the react component lifecycle, which function is executed immediately after the constructor?
react js form with multiple components
react form validation

I'm still relatively new to React/Javascript & working with its functions. I created a component that takes user input and renders a button that allows a user to link to an outside URL. The button title is created by the user and then the URL is added.

However, when a url is pasted or I begin typing it, the onChange handler automatically creates the button without using the onSubmit function. So if I begin typing a paste a url (even if the data is wrong), the onChange event takes whatever I've input without allowing me to click "submit first".

I'm following this tutorial as a guideline for creating my onChange/onSubmit functions: https://www.youtube.com/watch?v=qH4pJISKeoI&t=304s. His demo does not have the same issue and his input fields solve a different problem.

onChange & onSubmit Functions

    this.state = {
      links: [],
      url: '',
      title: ''
    }
  }

  onChange = (e) => {
    e.preventDefault(e)
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  // onSubmit

  onSubmit = e => {
    e.preventDefault(e)
  }

...

render() {
    if (this.state.url === '') {
      return (
        <>
          <form>
            <input
              name="title"
              type="text"
              placeholder="add button text"
              onChange={e => this.setState({ title: e.target.value })}
            />
            <input
              name="url"
              type="url"
              placholder="your-link.com"
              onClick={(e) => { e.stopPropagation() }}
              disabled={this.state.title === ''}
              onChange={e => this.setState({ url: e.target.value })}
            />
            <br />
          </form>
          <button onClick={this.onSubmit}>Submit</button>
        </>
      )
    } else {
      return (
        <>
          <div>
            <a href={this.state.url} target="_blank" rel="noopener noreferrer"><p>{this.state.title}</p></a>
          </div >
        </>
      )
    }
  }
}


I've tried separating the onChange events using onChange={this.title} and {this.url} , disabling the URL field until the title is added, and adding onClick={(e) => { e.stopPropagation() }} in the url input field to prevent autosubmission as shown in the code above.

Any help understanding what causes this problem would be appreciated.

Let's check what is happening:

  1. We have onChange on input with url.
  2. When anything is being changed in this input field,
  3. On change is called and it triggers render method.
  4. In render if (this.state.url === '') { this is no longer true so it creates link without needing to submit.

What is preventDefault() in React?, preventDefault() on button, form, or submit events . const [value, setValue] = React. In the past, it was desired to refresh the browser to flush all state and to submit the data to a React Event Handlers: onClick, onChange . ReactJS: OnChange handler auto submitting data before onClick Hot Network Questions Can I use misty step when placing bag of holding inside another bag of holding before the gate to the Astral Plane opens?

Prevent default will not work while you have params in it:

e.preventDefault(e)
// probably this may be a typo instead?
// it's preventing you to go further line due to error.

Remove e param and it should be fine:

e.preventDefault()

Forms – React, function that handles the submission of the form and has access to the data that the <label> Name: <input type="text" value={this.state.value} onChange={​this. now pass the value to other UI elements too, or reset it from other event handlers. Also, since setState() automatically merges a partial state into the current  If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called. This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without after it, such as onClick={this.handleClick}, you should bind that method.

         <form onSubmit={this.onSubmit}>
          <input
            name="title"
            type="text"
            placeholder="add button text"
            onChange={e => this.onChange(e)}
          />
          <input
            name="url"
            type="url"
            placholder="your-link.com"
            disabled={this.state.title === ''}
            onChange={e => this.onChange(e)}
          />
          <br />
          <button type="submit">Submit</button>
        </form>

do changes like this and check

React Quickly: How to Work with Forms in React, An excerpt from Azat Mardan's "React Quickly" book, which explains how to real DOM as possible, and that includes the data in the form elements. to implement an event handler to capture changes with onChange . Conversely, a two-way binding allows views to change states automatically without  The form was to save the data in React state when the input value changes. When the user clicks on submit, the submit handler function should get the form data from the component state object.

What's the difference between `handleSubmit` and , return <button onClick={handleSubmit}>Click me</button>; }. How do I pass form value(s) to my own submit handler? # import React from 'react' import { reduxForm, Field } from 'redux-form' const SearchBar = ({ handleChange, <div> <Field component="input" name="search" onChange={handleChange} type="text​"  How to create-react-app with Docker 17 November 2017 JavaScript, ReactJS How to throttle AND debounce an autocomplete input in React 01 March 2018 JavaScript, ReactJS Display current React version 07 January 2018 JavaScript , ReactJS Replace an item in an array, by number, without mutation in JavaScript (ES6) 23 August 2018 JavaScript Related

React Events, based on user events. React has the same events as HTML: click, change, mouseover etc. A good practice is to put the event handler as a method in the component class: render() { return ( <button onClick={this.shoot}>Take the shot​!</button> ) Send "Goal" as a parameter to the shoot function, using arrow function: When the user clicks on the input field and starts typing, each keystroke triggers the onChange event handler. The handleChange function is then called and the current value (text) in the input is

Handling User Input in React, They allow for custom input formatting before submission for to write onChange handlers covering every possible way your data can change and Within the ItemCard component, add an onClick attribute to the edit button  Binding the handler in our constructor function so it doesn't lose a reference to this when triggered on the event target element. this.handleChange = this.handleChange.bind(this); Assigning the handler to the onChange property of our input element (We'll also assign a name property here, so we can reference it in the handler above).