資料結構
網路
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+ 檢視
廣告