如何在 ReactJS 中從子元件設定父元件的狀態？

在 ReactJS 中，我們可以透過將值作為子元件的 prop 傳遞來設定子元件中的狀態。有時，我們需要在 ReactJS 中將狀態從子元件設定為父元件。

我們可以在父元件中建立一個狀態處理函式，並將其作為子元件的 prop 傳遞。之後，我們可以使用子元件函式來設定父元件的狀態。透過這種方式，我們可以管理父元件的狀態。

在函式式元件中從子元件設定父元件狀態

我們可以透過將狀態處理函式作為子元件的 prop 傳遞，在函式式元件中從子元件設定父元件的狀態。

無論何時我們將任何函式作為元件 prop 傳遞，我們都可以從子元件執行它，即使它是在父元件中定義的。

語法

使用者可以遵循以下語法來處理 React 函式式元件中從子元件設定父元件的狀態。

// in the parent component
<Child change = {handleState} />

// in the child component
<button onClick = {() => change()}> Change Value from child </button>

在上面的語法中，我們將 handleState() 函式作為子元件的 prop 傳遞。在子元件中，我們呼叫 change() 函式，該函式執行父元件的 handleState() 函式。

示例

在 App.js 檔案中，我們使用鉤子建立了狀態變數。我們還建立了 handleState() 變數，它更改狀態變數的值。

此外，我們匯入了子元件並將 handleState() 函式作為子元件的 prop 傳遞。

檔名：- App.js

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
   let [state, setState] = useState("Initial");
   function handleState() {
      setState("state Changed from child component!");
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Handling the <i> parent state from child component </i> in ReactJS.{" "}
         </h2>
         <div> The input value is {state}. </div>
         <Child change = {handleState} />
      </div>
   );
}

檔名：Child.js

import React, { useState } from "react";

function Child({ change }) {
   return (
      <div>
         <button onClick = {() => change()}> Change Value from child </button>
      </div>
   );
}
export default Child;

輸出

它將產生以下輸出：

單擊“從子元件更改值”按鈕時，將產生以下輸出：

在上面的輸出中，使用者可以觀察到，當他們單擊按鈕時，它會更改父元件的狀態。

示例

在第一個示例中，我們透過將函式作為子元件的 prop 傳遞來更改子元件中父元件的狀態，但是我們為父元件的狀態設定了硬編碼值。

在下面的示例中，我們還將值從子元件傳遞到父元件，並使用從子元件獲得的新值更新父元件的狀態。

檔名：App.js

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
   let [state, setState] = useState("Initial");
   function handleState(newValue) {
      setState(newValue);
   }
   return (
      <div className = "App">
         <h2>
            {" "}
            Handling the <i> parent state from child component </i> in ReactJS.{" "}
         </h2>
         <div>
            The input value in child state accessing from parent state is {state}.
         </div>
         <br></br>
         {/* pass handleState function as a prop of child component */}
         <Child change = {handleState} />
      </div>
   );
}

檔名：Child.js

import React, { useState } from "react";

// accessing the change function from the prop.
function Child({ change }) {
   const [value, setNewValue] = useState("");
   function handleChange(event) {
      let value = event.target.value;
      setNewValue(value);
      change(value);
   }
   return (
      <div>
         <input
            placeholder = "Enter some texts."
            value = {value}
            onChange = {handleChange}
         />
      </div>
   );
}
export default Child;

輸出

輸入一些文字時：

在上面的輸出中，使用者可以觀察到輸入元素位於子元件內。我們在輸入欄位中寫入的內容會反映在父元件中。

在類元件中從子元件設定父元件狀態

我們也可以在類元件中將方法作為子元件的 prop 傳遞，以處理子元件中父元件的狀態。

語法

使用者可以遵循以下語法來處理類元件中子元件的父元件狀態。

<Child changeState = {this.changeState} />
<button onClick = {this.changeState}> Change parent's state </button>

在上面的語法中，我們使用 this 關鍵字訪問函式並將其作為子元件的 prop 傳遞。使用者可以看到我們如何從子元件呼叫 changeState() 函式。

示例

在 App.js 檔案中，我們在建構函式中定義了狀態。我們還定義了 changeState() 方法，該方法設定狀態值。changeState() 方法將更新的值作為引數，我們用它來更新狀態的值。

檔名：App.js

import React, { useState } from "react";
import Child from "./Child";

class App extends React.Component {
   constructor(props) {
      super(props);
      this.changeState.bind(this);
      this.state = { value: "Empty" };
   }
   changeState = (newValue) => {
      this.setState({ value: newValue });
   };
   render() {
      return (
         <div>
            <h2>
               {" "}
               Handling the <i> parent state from child component </i> in class components
            </h2>
            <h3> The value of state variable is {this.state.value}.</h3>
            <Child changeState = {this.changeState} />
         </div>
      );
   }
}
export default App;

在 Child.js 檔案中，我們在單擊按鈕時執行 handleChange() 函式。handleChange() 方法透過傳遞新值作為引數來呼叫 prop 的 changeState() 方法。

檔名：Child.js

import React from "react";
import { Component } from "react";

// accessing the change function from the prop.
class Child extends Component {
   constructor(props) {
      super(props);
      this.handleChange.bind(this);
   }
   
   handleChange = () => {
      this.props.changeState("This is value set up from child component!");
   };
   render() {
      return (
         <div>
            <h3> This is a child component! </h3>
            <button onClick = {this.handleChange}> Change parent's state </button>
         </div>
      );
   }
}
export default Child;

輸出

單擊“更改父元件的狀態”按鈕時，將產生以下輸出：

在本教程中，我們學習瞭如何從子元件設定父元件的狀態。實現目標的常用方法是將狀態處理函式作為子元件的 prop 傳遞，並透過傳遞新的狀態值作為引數來從子元件執行處理程式函式。

更新於：2023年10月26日

36K+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

開始
廣告