数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程序设计
C++
C#
MongoDB
MySQL
JavaScript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时装设计
法学如何在 ReactJS 中更新父级状态？
本文中我们将讲述如何在 React 应用程序中从子组件更新父组件的状态。
要通过子组件更新父组件的状态，我们可以使用其他依赖库（例如 Redux），或者使用这个简单的方法，即向子组件传递父组件的状态并相应地进行处理。
示例
在这个示例中，我们将构建一个 React 应用程序，该程序接收状态和方法来通过父组件更新状态，并将其传递给子组件，然后在处理后，我们将更新的状态传递给父组件。
App.jsx
import React, { useLayoutEffect, useState } from 'react';
const App = () => {
const [name, setName] = useState('Rahul');
return (
<div>
{name} has email id of rahul@tutorialspoint.com
<div>
<Child name={name} change={setName} />
</div>
</div>
);
};
const Child = ({ name, change }) => {
const [newName, setNewName] = useState(name);
return (
<div>
<input
placeholder="Enter new name"
value={newName}
onChange={(e) => setNewName(e.target.value)}
/>
<button onClick={() => change(newName )}>Change</button>
</div>
);
};
export default App;在上述示例中，每当用户在新的名称中键入时，它将改变并更新子组件的状态，并且单击更改按钮时，它将相应地更新父组件的状态。
输出
将产生以下结果。
更新于: 2021 年 3 月 18 日
3K+ 查看
广告