React State Events And Managed Controls
Here's an example of a React component with a "managed" input field. Whenever the value of the input field changes, an event handler is called which updates the state of the component with the new value of the input field. The call to setState in the event handler will trigger a call to render updating the component in the dom.
import React from 'react';
import {render} from 'react-dom';
class ManagedControlDemo extends React.Component {
constructor(props){
super(props);
this.state = {message: ""};
}
handleChange(e){
this.setState({message: e.target.value});
}
render() {
return (
<div>
<legend>Type something here</legend>
<input
onChange={this.handleChange.bind(this)}
value={this.state.message}
autoFocus />
<h1>{this.state.message}</h1>
</div>
);
}
}
render(<ManagedControlDemo/>, document.querySelector('#app'));Its very important to note the runtime behavior. Every time a user changes the value in the input field
. handleChange will be called and so
.setState will be called and so
.render will be called
Pop quiz, after you type a character in the input field, which DOM elements change
1. all of these - the top level div, legend, input, h1
2. only the input and h1
3. nothing
4. whats a DOM?