by Johny Thomas
約翰尼·托馬斯(Johny Thomas)
如何在React中從其父組件更改子組件的狀態 (How to change the state of a child component from its parent in React)
We will be building a simple React app which shows the real name of a superhero on a button click.
我們將構建一個簡單的React應用程序，單擊按鈕即可顯示超級英雄的真實姓名。
Let’s get started.
讓我們開始吧。
First, we will create a Superhero component with a name attribute in state. This component will render that name first.
首先，我們將創建一個具有name屬性處于狀態的Superhero組件。 該組件將首先呈現該name 。
Now let’s create a function changeName() in the Superhero component. This function will change the name in state to the actual name of the superhero.
現在，讓我們在Superhero組件中創建一個函數changeName() 。 此功能會將狀態下的名稱更改為超級英雄的實際名稱。
Now we have the Superhero component which shows the superhero name and a function which updates the name to his real name.
現在，我們有了顯示超級英雄名稱的Superhero組件和將名稱更新為真實姓名的函數。
The complete Superhero component will look like this:
完整的Superhero組件如下所示：
Now let’s create the App component which will render this Superhero component and a button. When we click the button it shows the real superhero name.
現在，讓我們創建App組件，該組件將呈現此Superhero組件和一個按鈕。 當我們單擊按鈕時，它將顯示真實的超級英雄名稱。
We have added a function handleClick() which will get called when the user clicks the button. We need to figure out a way to update the state of the child component, that is the Superhero component.
我們添加了一個handleClick()函數，該函數將在用戶單擊按鈕時調用。 我們需要找出一種更新子組件(即Superhero組件)狀態的方法。
We have created a function changeName() in the Superhero component. This function will show the real name of the superhero. If we can call this function from the App component, our work is done. So we will call this function.
我們已經在Superhero組件中創建了一個函數changeName() 。 此功能將顯示超級英雄的真實姓名。 如果我們可以從App組件中調用此函數，那么我們的工作就完成了。 因此，我們將調用此函數。
Here is where refs come to our rescue.
裁判在這里為我們解救。
Let’s create a ref of the Superhero component in the App component. Here is the code for doing that.
讓我們在App組件中創建Superhero組件的引用。 這是執行此操作的代碼。
Here we have created a ref using React.createRef() method and attached the ref to the Superhero component using the ref attribute.
在這里，我們使用React.createRef()方法創建了一個引用，并使用ref屬性將ref附加到了Superhero組件上。
Now we will be able to refer the Superhero node using this.superheroElement.current. We will also be able to call the changeName() function in the Superhero component using this.superheroElement.current.changeName().
現在，我們將能夠使用this.superheroElement.current引用Superhero節點。 我們還可以使用this.superheroElement.current.changeName()在Superhero組件中調用changeName()函數。
Let’s update our handleClick() function in our App component to call the changeName() function.
讓我們更新App組件中的handleClick()函數，以調用changeName()函數。
Our handleClick() function will look like this.
我們的handleClick()函數將如下所示。
You can check out the complete code in the below sandbox.
您可以在下面的沙箱中查看完整的代碼。
CodeSandboxCodeSandbox is an online editor tailored for web applications.codesandbox.io
CodeSandbox CodeSandbox是為Web應用程序量身定制的在線編輯器。 codesandbox.io
Now we have learned how to update the state of a child component from a parent component ?. I hope this was helpful.
現在我們已經學習了如何從父組件更新子組件的狀態？ 我希望這可以幫到你。
翻譯自: https://www.freecodecamp.org/news/react-changing-state-of-child-component-from-parent-8ab547436271/
)
