![]() We'll also look at something known as portals that allow us to render content to any HTML element on the page. Guess what we are going to do? In the following sections, we are going to use something known as refs that React provides to help us access the DOM API on HTML elements. Getting this behavior right by dealing with the JavaScript DOM API on various HTML elements directly is pretty easy. We aren't even going to bother with explaining how to go about that. Getting this behavior right using JSX and traditional React techniques is hard. This allows us to enter additional color values and submit them easily without having to keep jumping focus back and forth between the text field and the button. The entered value of purple is cleared, and the focus is returned to the text field. Now, wouldn't it be great if we could clear both the existing color value and return focus to the text field immediately after you submit a color? That would mean that if we submitted a color value of purple, what we would see afterwards would look as follows: Eww! That seems unnecessary, and we can do better than that from a usability point of view! If you want to enter another color value, you need to explicitly return focus to the text field and clear out whatever current value is present. Notice that the button gets focus, and the color value you just submitted is still displayed inside the form. Instead, pay attention to the text field and the button after you submit a value. ![]() That the square changes color for any valid color value you submit is pretty awesome, but it isn't what I want you to focus on. If you don't have any idea of what color to enter, yellow is a good one! Once you have provided a color and submitted it, the white square will turn whatever color value you provided: To see it in action, enter a color value inside the text field and click/tap on the go button. The Colorizer colorizes the (currently) white square with whatever color you provide it. Your browser does not support inline frames or is currently configured not to display inline frames. To highlight one such situation, take a look at the Colorizer example ( view in separate window): In our React-colored world where JSX represents everything that is good and pure about markup, why would you ever want to directly deal with the horribleness that is HTML? As you will find out (if you haven't already), there are many cases where dealing with HTML elements through the JavaScript DOM API directly is easier than fiddling with "the React way" of doing things. There will be times when you want to access properties and methods on an HTML element directly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |