如何在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.

现在我们已经学习了如何从父组件更新子组件的状态？我希望这可以帮到你。