Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement to Accessing a child component #6

Open
TonyGravagno opened this issue Jan 27, 2023 · 0 comments
Open

Enhancement to Accessing a child component #6

TonyGravagno opened this issue Jan 27, 2023 · 0 comments

Comments

@TonyGravagno
Copy link

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. 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.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant