Input Fields

Edit on Github
reactjs/input-fields.md
Jan 10, 2017
Reactjs

Here’s the template of our React component

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

 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()

 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

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