0.0.1 • Published 8 years ago
react-form-to-state v0.0.1
A simple react form binding helper which utilizes valueLink prop.
Install:
npm install -S react-form-to-state
Use:
Connect the wrapper
import React, { Component } from "react"
import connectForm from "react-form-to-state"
class Form extends Component {
render(){
return ( ... );
}
}
export default connectForm( Form );
Bind props
<input valueLink={ this.props.bindAs( "fieldName1" ) } />
<input type="checkbox" checkedLink={ this.props.bindAs( "fieldName2" ) } />
Your form data is binded as this.state.form
. You can set a custom prop name this way: this.props.bindAs( "fieldName1", "myCustomFormName" )
Complete example
import React, { Component } from "react"
import connectForm from "react-form-to-state"
class Form extends Component {
_submit( ev ){
ev.preventDefault()
console.log( this.state.loginForm );
}
render(){
return <form onSubmit={ this._submit.bind( this ) }>
<input type="text" valueLink={ this.props.bindAs( "login", "loginForm" ) } />
<input type="password" valueLink={ this.props.bindAs( "password", "loginForm" ) } />
<label>
<input type="checkbox" checkedLink={ this.props.bindAs( "remember", "loginForm" ) } />
Keep me signed in
</label>
<button>Submit</button>
</form>;
}
}
export default connectForm( Form );
0.0.1
8 years ago