[React] Forms

Handling user inputs with forms is the most important part of your web application. React provides the mechanism to work with states with HTML forms.

Uncontrolled Elements

When a form element is not linked to a React state, it is called an uncontrolled element.

class SearchBar extends React.Component {

  onInputChange(event) {
    //console.log(event.target.value);
  }

  render() {
    return (
      <div className="ui segment">
        <form className="ui form">
          <div className="field">
            <label>{this.props.title}</label>
            <input type="text" 
              onChange={(this.onInputChange)} />
          </div>
        </form>
      </div>
    );
  }
}
  • React does not know the values of uncontrolled elements.
  • You need to access HTML DOM to retrieve the values.

Controlled Elements

The power of React shines when a form element is linked to a React state.

  • In the controlled element, the value is stored in the React state.
  • You do not need to access HTML DOM to retrieve the values.

How the controlled element works:

  1. A user types in an input box.
  2. A callback function (event handler) gets invoked.
  3. The event handler updates the state with the “setState()” method.
  4. A component is rerendered.
  5. An input box got a value from the state.
class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = { term: '' };
    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    //console.log(event.target.value);
    this.setState({ 
      term: event.target.value.toUpperCase() 
    })
  }

  render() {
    return (
      <div className="ui segment">
        <form className="ui form">
          <div className="field">
            <label>{this.props.title}</label>
            <input type="text" 
              value={this.state.term}
              onChange={(this.onInputChange)} />
          </div>
        </form>
      </div>
    );
  }
}

The example shows how React saves form data inside the state. Any lowercase characters are converted to uppercase letters.

  • An event handler needs to be bound properly to the “this” object.
  • The “state” should be initialized properly.
  • The “value” attribute of an input needs to be linked to the proper state value.

Handling Form Submit

The default behavior of submitting a form is to refresh the form. To prevent the default behavior, you need to call the “event.preventDefault()”

onFormSubmit(event) {
  event.preventDefault();
}

render() {
  return (
    <form onSubmit={this.onFormSubmit}>
    </form>
  );
}

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s