Normalize Events with Reacts Synthetic Event System
Event handlers are passed an instance of SyntheticEvent in React. In this video we'll take a look at the wide range of events available to us, including Touch events.
[00:00] In this lesson, we're going to take a look at React Synthetic Event System, which normalizes all the events we might want to use across various browsers.
[00:10] I'm setting up a simple text area here. I'm going to keep the columns and the rows. We're not going to worry about the rest. We'll self-close this guy. Right after that, we're going to have an H1. Its content is going to be this.state.current event.
[00:27] Let's go ahead and set up our initial state in our constructor. We'll call super to get our context. We'll say this.state is equal to current event. We'll just set that up with a few dashes.
[00:42] We're also going to have an update method. I'm going to go ahead and bind that here to a context of this. We're going to create that method. Now it's going to take in an event off of that text area. We're simply going to set our state of current event to that event type.
[01:02] We get all the standard key press events. I'm going to go ahead and assign on key press to this.update. Try that out in the browser. Once we get up there, as soon as we type a key, we get key press. We get all the standard ones, key down, key up and so forth. Let's try a couple more complicated ones.
[01:22] We've got on copy, on cut and on paste. I'm going to go ahead and save that. Type some code in here. When we copy, we get our copy event. When we cut, we get our cut event. When we paste, we get our paste event. We can do that with the keyboard shortcuts as well. Here's a copy, here's a cut, and here's a paste.
[01:47] We get our standard unfocus and unblur events. When we focus on the field, we get our focus, and when we move away we get our blur, so focus and blur. We get the whole series of mouse events, so mouse over, mouse down and up.
[02:03] We also get some more obscure ones. This will be on double-click. When we click in the text area, we're going to get our focus. If I double-click, we get our double-click event. Do that one more time. Double-click and there is our double-click event.
[02:17] We also automatically get a series of touch events. I'm going to say, "On touch, start. On touch, move," and, "On touch, end." For this one, we're going to switch over to an iPad emulator. Bring this out a bit.
[02:33] Here is our text field. If I touch right there, you'll see I've got a touch start. I'm moving, I get touch move. I get touch end. I'll do that one more time. Touch start, touch move and touch end.
this.update = this.update.bind(this) } update(e){ this.setState({currentEvent: e.type}) } render(){ return ( <div> <textarea onKeyPress={this.update}
Confused with the reference to this.update in the constructor, then the eventHandler for textarea calling this.update
onKeyPress={this.update} won't this call the method? Why do we need to have this.update in the constructor binding this.update = this.update.bind(this)?
Do we explicitly need to bind this in ES6?
to avoid binding in a constructor, the 'update' method should be an array function.
hi, Im getting a index.js:1446 Warning: Expected onTouchStart listener to be a function, instead got a value of boolean type.
wsid?
Hi, I love your lessons about React. Can you share what autocomplete/shortcut plugins you are using?
Thank you