Handling forms with React

Form handling is a little bit different with React. An HTML form will navigate to the next page when it is submitted. A common case is that we want to invoke a JavaScript function that has access to form data after submission and avoid navigating to the next page. We already covered how to avoid submit in the previous section using preventDefault()

Let's first create a minimalistic form with one input field and the submit button. To be able to get the value of the input field, we are using the onChange event handler. When the value of the input field is changed, the new value will be saved to state. The this.setState({text: event.target.value}); statement gets the value from the input field and saves it to the ...

Get Hands-On Full Stack Development with Spring Boot 2.0 and React now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.