A react component for data-binding, which makes writing form widget such easy.
Extends your component by BindingComponent
:
import { BindingComponent } from 'react-binding-component';
class TextInput extends BindingComponent {
constructor(props) {
super(props);
}
render() {
return (
<input
onChange={this.onChange.bind(this)}
value={this.bindStateValue}
/>
);
}
}
In the above example, the super class BindingComponent
has the following members:
this.onChange
: the handler will update state, usually you pass this function toonChange
event of form widgets.this.bindStateValue
: this is a getter and setter.- getter: access to the binding state.
- setter: update value to the binding state.
And we will have the following props
in the component TextInput
:
bindStateCtx
: the context of state that you expect to bind on, usuallythis
.bindStateType
: theFunction
to convert the value to the corresponding type, likeString
,Number
and etc.bindStateName
: the namespace for accessing frombindStateCtx.state
, which supports:name
: the direct accessparent.name
: the dot format
Then use your customized component as below:
class ExampleView extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
config: {
count: 0
}
};
}
render() {
return [
<TextInput bindStateCtx={this}
bindStateType={String}
bindStateName="name"
/>,
<TextInput bindStateCtx={this}
bindStateType={Number}
bindStateName="config.count"
/>
];
}
}
What's the different from rsamec/react-binding?
If you have experience on data-binding in react community, you will get known about this light-weight library. But I would say react-binding-component is more light-weight, and it's more for writing data-binding integrated UI widget, not for adding the data-binding feature on a native component.
$ npm install react-binding-component --save
MIT @ WeFlex, Inc.