<section class="section">
  
  <div class="content">
    <dl>
      <dt class="has-text-info">Controlled Input</dt>
      <dd>Value/state elemen input dikontrol oleh React.</dd>
      <dt class="has-text-info">Uncontrolled Input</dt>
      <dd>Value/state elemen input dikontrol elemen itu sendiri. React cuma baca perubahan value/state.</dd>
    </dl>
  </div>

  <div class="panel">
    <div class="panel-heading">Sample App</div>

    <!-- sample app -->
    <div id="app" class="panel-block">
    </div>
  </div>
  
</section>
form{
  width:100%;
}
class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name:'',
      isChecked:false
    }
    this.handleNameChange = this.handleNameChange.bind(this);
    this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    this.submit = this.submit.bind(this);
  }
  
  handleNameChange(e){
    //stop event biar name input.value
    //nggak langsung diupdate
    e.preventDefault();
    this.setState({
      //konversi ke huruf besar
      name:e.target.value.toUpperCase()
    })
  }
  
  handleCheckboxChange(e){
    this.setState({
      isChecked: !this.state.isChecked
    })
  }
  
  submit(e){
    e.preventDefault();
    alert(JSON.stringify(this.state))
  }
  
  render() {
    return (
      <form>
        {/* controlled */}
        <div className="field">
          <label className="label">Controlled Name Input</label>
          <div className="control">
            <input className="input" type="text" placeholder="Text input"
              value={this.state.name} 
              onChange={this.handleNameChange}/>
          </div>
        </div>
        {/* uncontrolled checkbox */}
        <div className="field">
          <div className="control">
            <input type="checkbox" 
              onChange={this.handleCheckboxChange}/> Uncontrolled Checkbox
          </div>
        </div>
        <button className="button is-info" onClick={this.submit}>Ok</button>
      </form>
    );
  }
}

/////////////////// ROOT

const App = () => (
  <MyForm />
);

ReactDOM.render(<App />, document.getElementById("app"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css

External JavaScript

  1. https://unpkg.com/react@16/umd/react.development.js
  2. https://unpkg.com/react-dom@16/umd/react-dom.development.js
  3. https://unpkg.com/prop-types/prop-types.js
  4. https://unpkg.com/@babel/standalone/babel.min.js