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 are components that are controlled by React, likely with state values.
You can set the value in the input component
1 <input type='text' onChange(this.handleChange) value={this.state.text}/>