You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Please consider adding this text to help explain everything that's going on in the example:
Explanation
In SignInModal, render is executed. The Input component's ref attribute is executed as a function, accepting the current component, which is the Input component itself. The function does not return a value. It uses this, which is scoped to SignInModel to create a new property, InputComponent, and it assigns the Input component to that new property.
When render() executes, the new Input component is created, with its this.textInput assigned the result of createRef(). The component render() is executed and the input element's ref attribute is assigned the new reference. Therefore, in Input, textInput refers to the input element as a child component.
Back in SignInModal, in componentDidMount, this.InputComponent is available, as created in the render. The focus() method is executed on that property, which is the Input component. The focus() method uses its this.textInput property, a reference to the 'input' element, to set the element's focus.
The text was updated successfully, but these errors were encountered:
ref: https://github.com/reactpatterns/reactpatterns-website/blob/main/docs/accessing-a-child-component.md
Please consider adding this text to help explain everything that's going on in the example:
Explanation
In SignInModal,
render
is executed. TheInput
component'sref
attribute is executed as a function, accepting the currentcomponent
, which is theInput
component itself. The function does not return a value. It usesthis
, which is scoped to SignInModel to create a new property,InputComponent
, and it assigns theInput
component to that new property.When
render()
executes, the newInput
component is created, with itsthis.textInput
assigned the result ofcreateRef()
. The componentrender()
is executed and theinput
element'sref
attribute is assigned the new reference. Therefore, in Input, textInput refers to theinput
element as a child component.Back in SignInModal, in
componentDidMount
,this.InputComponent
is available, as created in the render. Thefocus()
method is executed on that property, which is theInput
component. Thefocus()
method uses itsthis.textInput
property, a reference to the 'input' element, to set the element's focus.The text was updated successfully, but these errors were encountered: