Let’s start with a secret: the onChange handler. The form data and the input value is updated through an onChange handler.įor further info, check out the React controlled forms documentation.The input value is set with the props provided through React.In React, there is a concept called “controlled input.” This means the following:
Let’s start with the handling of form inputs. So, if you don’t know Mobx yet, I encourage you to check their site and the presentations they have. Working with Mobx is simple because you can work with objects the way you have always done in javascript (simply changing object properties values) and you can also achieve great rendering performance with no effort at all. It allowed me to greatly simplify my applications compared to the usually recommended flux architecture with libraries like Redux. It has bindings for React, which means that it allows React components to update automatically when the data they depend on changes. Mobx is a library that allows you to create observable data. If you’re already familiar with Mobx, I recommend to jump directly to the R eact forms section of the article. It is highly recommended that you do so while reading this article because only a subset of the code will be displayed on this page. I’ll indicate when to check it out (tags) in every section. There is a Github repo available with the full code created for this article. Note that while I am going to use observables and Mobx, most of the code and ideas here can be applied in general. I will start from the basic principle that lets us modify the form data and iterate over the idea until we reach a simple solution. Simple data management and rendering with observables.
0 kommentar(er)
