In this tutorial we are going to create simple member registration form with Reactjs. Form data handling is much more easier with Reactjs. Form validations are discussed in later.
import React from 'react';
export default class form extends React.Component {
constructor(props) {
super(props);
this.state = {
fname: "",
lname:"",
city:""
}
};
updateState(e, name) {
var val = e.target.value;
if(name == "fname") this.setState({fname: val});
if(name == "lname") this.setState({lname: val});
if(name == "city") this.setState({city: val});
}
submitForm(){
//Do ajax request here OR
// Relay mutation OR
// connect with firebase or etc
}
render() {
return (
<div>
<p>
First Name:
<input type="text" value={this.state.fname}
onChange={e => this.updateState(e,'fname')}/>
</p>
<p>
Last Name:
<input type="text" value={this.state.fname}
onChange={e => this.updateState(e,'lname')}/>
</p>
<p>
City:
<input type="text" value={this.state.fname}
onChange={e => this.updateState(e,'city')}/>
</p>
<p>
<button onClick={e=> this.submitForm()}> Submit </button>
</p>
</div>
);
}
}