Get form data in React

by

There are a few ways to do this:

1) Get values from array of form elements by index

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target[0].value)
}

2) Using name attribute in html

handleSubmit = (event) => {
  event.preventDefault();
  console.log(event.target.elements.username.value) // from elements property
  console.log(event.target.username.value)          // or directly
}

<input type="text" name="username"/>

3) Using refs

handleSubmit = (event) => {
  console.log(this.inputNode.value)
}

<input type="text" name="username" ref={node => (this.inputNode = node)}/>

Full example

class NameForm extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault()
    console.log(event.target[0].value)
    console.log(event.target.elements.username.value)
    console.log(event.target.username.value)
    console.log(this.inputNode.value)
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            name="username"
            ref={node => (this.inputNode = node)}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    )
  }
}

More Related Contents:

  1. We simply cannot write “ in ReactJS?
  2. Dynamic tag name in React JSX
  3. Error : Cannot read property ‘map’ of undefined
  4. How do I hide API key in create-react-app?
  5. Clear and reset form input fields
  6. How to resolve “Cannot use import statement outside a module” in jest
  7. Hide keyboard in react-native
  8. React app exiting in docker container with exit code 0
  9. When giving unique keys to components, is it okay to use Math.random() for generating those keys?
  10. Should flux stores, or actions (or both) touch external services?
  11. React-Router open Link in new tab
  12. ReactJS with ES6: this.props is not a function when I communicate two components
  13. useNavigate() may be used only in the context of a component
  14. Testing React components that fetches data using Hooks
  15. Why React useState with functional update form is needed?
  16. Trace why a React component is re-rendering
  17. What is the difference between using constructor vs getInitialState in React / React Native?
  18. ‘TypeError [ERR_INVALID_ARG_TYPE]: The “path” argument must be of type string. Received type undefined’
  19. How to hash CSS class names in Nextjs?
  20. How can I use Fabric.js with React?
  21. React passing parameter via onclick event using ES6 syntax
  22. React fetch data in server before render
  23. Why useEffect doesn’t run on window.location.pathname changes?
  24. Call child component method from parent in react
  25. how to change jest mock function return value in each test?
  26. How to set build .env variables when running create-react-app build script?
  27. ReactJS – prevState in the new useState React hook?
  28. Image elements do not have explicit width and height
  29. How to go back to previous route in react-router-dom v6
  30. React – “localStorage is not defined” error showing

Leave a Comment