A helper util to use LinkedStateMixin for ES6 React Components
A helper function to use LinkedStateMixin for ES6 React Components.
valueLink
valueLink
has been removed from React starting on v16
. Still, this projects works just fine for older versions.
If you'd like to future-proof your application, check out @developit's linkstate
.
npm install react-link-state --save
import React from 'react';
import linkState from 'react-link-state';
export default MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
toggle: false
};
}
render() {
console.log(this.state);
return (
<form>
<input type="text" valueLink={linkState(this, 'username')} />
<input type="password" valueLink={linkState(this, 'password')} />
<input type="checkbox" checkedLink={linkState(this, 'toggle')} />
</form>
);
}
}
Note: Use checkedLink
for checkboxes.
Deep link-state is also supported!
// Given that we have this state:
// {
// users: [{
// profile: {
// first_name: ''
// }
// }]
// }
<input type="text" valueLink={linkState(this, 'users.0.profile.first_name')} />
npm test
You need node v4.0.0
to runs the tests. See issue.
You will need to have window, window.document and window.document.createElement globally available before you import React. Otherwise React will think it can't access the DOM and methods like setState won't work.