What's the best way to implement 2-way data binding similar to AngularJS for all input elements in ReactJS?
I think the way is to be reactive for two-way data binding implementation. MobX and knockout.js proves that. Pub/sub pattern seems to fit in general. The Observer and Observable could provide a generalized mechanism for push-based notifications, as core of two-way data binding, which also known as the observer design pattern. And Rx are known to be the battle tested implementation of the pattern. Observable object represents the object that sends notifications (the provider), and the Observer object represents the class that receives them (the observer). I will not try to implement the wheel, my theoretical optimism says that things should be obvious :) Great egghead session should help with code: https://egghead.io/lessons/rxjs-creating-observable-from-scratch
You have to use onChange and bind input value to state it's pretty annoying. I've heard good things about redux-forms though.
I don't know if this might answer your question but you can send context or methods of parent class to child class and then access functions or methods of parent class in child component thereby having a sort of two way binding.This might not be the right way to do it but it works most of the times when you need to manipulate parents data from children. Ex: In the render of parent class you can call child component like this:
<ChildClassName parentContext={this} />
Now if you would like to manipulate some handler of parent class you can do in this manner:
this.props.parentContext.handlerFunction(parameters);
where handlerFunction is defined in parent class.
Again it is strongly advisable not to do this kind of things in react but sometimes it makes your work quite easier.
Always use flux or flux-style modules like redux or mobx to handle data flow as they make task of modularizing and managing data flow quite easier.
Why you even need something called 2-way data binding especially when there is an input.value?
If you want to update a server data whenever user changes input you can just use Vanilla JS - fastest framework in the world:
[].forEach.call(document.forms.myForm.elements, element => {
element.addEventListener('change', () => {
fetch("/post-url", {
method: "POST",
body: new FormData(document.forms.myForm);
});
});
P.S. it is very simple example. If element is a collection, you might iterate thought it also.
React is unidirectional flow in a strict sense. You propagate the changes using JS methods like onClick, onChange which inturn update the props/states and render the UI. It won't automatically update the state from the user events/actions.
You use the flux pattern instead of "2-way-bind". React is unidirectional flow, that's its organisational strength and coincidentally the main reason for choosing it and redux together.
You can use a package like redux-form for the particular question you asked, where all your input fields dispatch actions to a top-level redux store, and this data can be "connected" to from any component (using redux) to "bind" it.
React/redux work this way for everything. This is so that your actions (or "events") all pass through a central store where they can be dealt with. Then when the main store updates as a result, any connected components will re-render with new props if needed. It eliminates about a million race conditions, spaghetti and complicated chains in larger apps.
vijay pawar
:)
Though late , use react-chopper for two way databinding in reactjs
No need to remember this.setState()
No need to use other libraries for state management
Unidirectional Flow under the hood
Use reactjs almost like angular