Input Fields

January 10, 2017

Here's the template of our React component

code

import React from "react";
import ReactDOM from "react-dom";

class MyComponet extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  // stuff goes here
}

ReactDOM.render(<MyComponent />, document.querySelector("#root"));

You can get the value of any input field with e.target.value

code

 handleChange (e) {
   console.info(e.target.value)
  }

 render () {
   return (
     <input type='text' onChange(this.handleChange)/>
    )
  }

Once you have the value, you can update React state with this.setState()

code

 handleChange (e) {
   this.setState({
    text: e.target.value
   })
  }

 render () {
   return (
     <input type='text' onChange(this.handleChange)/>
     <h3> You typed {this.state.text}</h3>
    )
  }

Controlled components

Controlled components are components that are controlled by React, likely with state values.

update the input field value

You can set the value in the input component

code

     <input type='text' onChange(this.handleChange) value={this.state.text}/>

Input Fields

Controlled components

update the input field value

Links