Notes

Input Fields

Edit on GitHub

ReactJS

Here’s the template of our React component

 1import React from 'react'
 2import ReactDOM from 'react-dom'
 3
 4class MyComponet extends React.Component {
 5  constructor (props) {
 6    super(props)
 7    
 8    this.state = {}
 9  }
10  // stuff goes here
11}
12
13ReactDOM.render(
14  <MyComponent />,
15  document.querySelector('#root')
16)

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

1 handleChange (e) {
2   console.info(e.target.value)
3  }
4 
5 render () {
6   return (
7     <input type='text' onChange(this.handleChange)/>
8    )
9  }

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

 1 handleChange (e) {
 2   this.setState({
 3    text: e.target.value
 4   })
 5  }
 6 
 7 render () {
 8   return (
 9     <input type='text' onChange(this.handleChange)/>
10     <h3> You typed {this.state.text}</h3>
11    )
12  }

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

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