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/