banner 728x90

Reacting and autofocus

In Mobile Web Development 16 views
banner 728x90

Although I love ReactJS, I can say that I sometimes find that interactions that were easy during the pre-ReactJS annoyingly difficult or at least, & # 39 ; indirectly & # 39; goods. A good example is to ensure that a certain element is focused when clicking a button in another component; in the old days it was three lines of code, but with React it can be more.

Let's look at a few strategies to focus on elements with ReactJS.

autofocus

The autofocus attribute is honored in ReactJS but only when the element is reassigned with React:


autofocus is easy to use, but only works when the is rendered in the first instance; since React intelligently recalculates only elements that have been modified, the autofocus attribute is not reliable in all cases.

componentDidUpdate with ref

Because we can not rely solely on the autofocus attribute, we can use componentDidUpdate to complete the focus:

class Expressions expands component  
}
 

componentDidUpdate is activated after the component has been updated, so any change in the parent component would activate this method and your would get focus. In my cases, I usually enable a className on the parent element to indicate that the element is active and thus the componentDidUpdate will activate.

My perspective on inter-widget interaction is formed by the days of Dojo's thigh UI framework, where each widget usually had a reference to each underlying widget; with ReactJS the practice avoids (hopefully) ref and the use of state which is logical, but there is still that part of me that desires a simple reference, that is the reason why the second strategy makes sense for me.


banner 728x90
author
Author: 
    Build a user settings store with AWS AppSync
    Build a user settings store with AWS AppSync
    Amazon Cognito Sync is a service that
    Synchronize user settings for Android with AWS AppSync
    Synchronize user settings for Android with AWS AppSync
    Amazon Cognito Sync is a service that
    Script & Style Show: Episode 10: Dojo
    Script & Style Show: Episode 10: Dojo
    In this episode welcome David and Todd

    Leave a reply "Reacting and autofocus"

    Must read×

    Top