- 4Synchronize React UI and State with Controlled Components3m 41s
Synchronize React UI and State with Controlled Components
Share this video with your friends
We’ll make the input field a “controlled component” by reacting to each change of the input and capturing it in the component state. Following this model gives us assurance that the UI is always a representation of the current application state.
@Andrew, why don't you use ES6's arrow function for handleInputChange, like:
handleInputChange = e => { this.setState({ currentTodo: e.target.value}) }
- no binding needed. Is there any drawback of doing it this way?
@Andrew, why don't you use ES6's arrow function for handleInputChange, like:
handleInputChange = e => { this.setState({ currentTodo: e.target.value}) }
- no binding needed. Is there any drawback of doing it this way?
The reason this works is because an arrow function's 'this' is automatically assigned to the context in which it is defined. You cannot rebind an arrow function's 'this' using .bind, .call, or .apply. You also need to pay attention to hoisting if you use arrow functions.
I like using ES6's class members and arrow functions because it's more concise, but I would like to know if I missed any drawbacks of using them.