17.controlled-uncontrolled-input.jsx

/**
 * Controlled - Uncontrolled Components
 * Gist: https://gist.github.com/vasanthk/a6bf35857749b09275a339f6fd9469bb
 * In depth: https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/
 *
 * @Reference:
 * https://www.sitepoint.com/video-controlled-vs-uncontrolled-components-in-react/
 * https://facebook.github.io/react/docs/uncontrolled-components.html
 */

// It’s hard to talk about controlled inputs in the abstract. Let’s start with an uncontrolled (normal) input and go from there.
// So, a normal HTML input field effectively stores its own value at all times, and you can get the element and ask for its value.
// this is what we refer to as an "uncontrolled" input

// What makes an element “controlled”?
// There are other form elements, of course. You have checkboxes and radios and selects and textareas.
// A form element becomes “controlled” if you set its value via a prop. That’s all.
let simpleInput = '<input type="text" />';
// When you fiddle with this input in the browser, you see your changes. This is normal.

// A controlled input disallows the DOM mutations that make this possible.
// You set the value of the input in component-land and it doesn’t change in DOM-land.

let simpleInput = '<input type="text" value="This won\'t change. Try it." />';
// Obviously static inputs aren’t very useful to your users. So, we derive a value from state.

class UncontrolledNameInput extends React.Component {
  constructor() {
    super();
    this.state = {name: ""}
  }

  render() {
    return <input type="text" value={this.state.name} />
  }
};
// Then, changing the input is a matter of changing component state.
class ControlledNameInput extends Component {
  constructor() {
    super();
    this.state = {name: ""}
  }

  render() {
    return (
      <input
        value={this.state.name}
        onChange={e => this.setState({name: e.target.value})}
      />
    );
  }
}

// This is a controlled input. It only updates the DOM when state has changed in our component. This is invaluable when creating consistent UIs.
// If you’re using stateless functions for form elements, read about using state hoisting to move new state up the component tree.

// Note:
// In React, you can still create "uncontrolled" inputs: Using 'refs'
// The ref attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.
// When the ref attribute is used on an HTML element, the ref callback receives the underlying DOM element as its argument.
// More on refs: https://facebook.github.io/react/docs/refs-and-the-dom.html

class MyComponent extends React.Component {
  onClick() {
    const input = this.refs.myInput;
    const value = input.value;
    // do something with the value
  }

  render() {
    return <input type="text" ref="myInput" />
  }
}

// We can make this even simpler by using array fns in ref

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => this.input = input} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

// Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.
// It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.


// DEFAULT VALUES
// In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM.
// With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled.
// To handle this case, you can specify a defaultValue attribute instead of value.

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            defaultValue="Bob"
            type="text"
            ref={(input) => this.input = input}/>
        </label>
        <input type="submit" value="Submit"/>
      </form>
    );
  }
}

// Likewise, <input type="checkbox"> and <input type="radio"> support defaultChecked, and <select> supports defaultValue.