Form Input Binding in React and Vue.js

In this post, I will show you how to do form input binding in React and Vue.js. The objective of binding is the same for both libraries but differs on the implementation. Again this series is not about which is the best but instead to learn how to use both libraries.

Form Input Binding in React

<div id="root"></div>

Using React’s useState we can perform form element binding although we need to write the handler for setting the value and handler for onChange.

class App extends React.Component {
  constructor(props) {
    super(props);    
    this.state = {
      name: "", 
      gender: "",
      comment: ""};
  }
  
  render() {
    return (
      <>
        <h2>Form Input Binding Example in React</h2>
        
        <label>Name</label><br/>
        <input value={this.state.name} onChange={(e) => { this.setState({name: e.target.value}) }} className="form-control form-control-sm" /><br/><br/>
        
        <label htmlFor="genderSelect">Gender (Dropdown)</label><br/>
        <select id="genderSelect" value={this.state.gender} onChange={(e) => { this.setState({gender: e.target.value}) }} ><br/><br/>
          <option value="">-- select --</option>
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
        </select><br/><br/>
        
        <label>Gender (Radio Buttons)</label><br/>
        <input type="radio" id="male" name="gender" value="male" onChange={(e) => {this.setState({gender: e.target.value})}} checked={this.state.gender === 'male'} />
        <label htmlFor="male">Male</label><br/>
        <input type="radio" id="female" name="gender" value="female" onChange={(e) => {this.setState({gender: e.target.value})}} checked={this.state.gender === 'female'} />
        <label htmlFor="female">Female</label><br/>
        <input type="radio" id="other" name="gender" value="other" onChange={(e) => {this.setState({gender: e.target.value})}} checked={this.state.gender === 'other'} />
        <label htmlFor="other">Other</label>
        <br/><br/>
        
        
        <label htmlFor="comment">Comment</label><br/>
        <textarea id="comment" style={{width: "400px"}} value={this.state.comment} onChange={(e) => {this.setState({comment: e.target.value})}}></textarea>
        
        <h2>Output</h2>
        <table border="1">
          <tr>
            <td>Username</td><td>{this.state.name}</td>
          </tr>
          <tr>
            <td>Gender</td><td>{this.state.gender}</td>
          </tr>
          <tr>
            <td>Comment</td><td><pre>{this.state.comment}</pre></td>
          </tr>
        </table>
      </>);
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

See the Pen Form Input Binding – React by John Pili (@johnpili) on CodePen.

Form Input Binding in Vue.js

Vue.js uses v-model for its two way binding and doesn’t require functions to handle the onChange; of course you can also use functions in Vue if you need advance handling of changes.

<div id="root">
  <h2>Form Input Binding Example in Vue</h2>        
  <label>Name</label><br/>
  <input v-model="name" /><br/><br/>
  <label for="genderSelect">Gender (Dropdown)</label><br/>
  <select id="genderSelect" v-model="gender"><br/><br/>
    <option value="">-- select --</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
  </select><br/><br/>
        
  <label>Gender (Radio Buttons)</label><br/>  
  <input v-model="gender" type="radio" id="male" name="gender" value="male" />    
  <label for="male">Male</label><br/>
  
  <input v-model="gender" type="radio" id="female" name="gender" value="female" />
  <label for="female">Female</label><br/>
       
  <input v-model="gender" type="radio" id="other" name="gender" value="other" />
  <label v-model="gender" for="other">Other</label>
        
  <br/><br/>
  
  <label for="comment">Comment</label><br/>
  <textarea id="comment" style="width: 400px;" v-model="comment"></textarea>
        
  <h2>Output</h2>
  <table border="1">
    <tr>
      <td>Username</td><td v-html="name"></td>
    </tr>
    <tr>
      <td>Gender</td><td v-html="gender"></td>
    </tr>
    <tr>
      <td>Comment</td><td><pre v-html="comment"></pre></td>
    </tr>
  </table>
</div>
var app = new Vue({
  el: "#root",
  data: {
    name: "",
    gender: "",
    comment: "",
  },
  methods: {    
  }
 });

See the Pen Form Input Binding – Vue by John Pili (@johnpili) on CodePen.

Leave a Reply