在 React 中將狀態傳遞迴父元件

Oluwafisayo Oluwatayo 2023年1月30日 2022年5月31日
  1. 使用回撥函式將資料返回給父元件
  2. 使用道具將狀態傳遞迴父元件
  3. 從多個子元件向父元件傳遞資料
  4. まとめ
在 React 中將狀態傳遞迴父元件

讓一個優秀的開發人員從普通人中脫穎而出的一件事是編寫乾淨、格式良好的程式碼的能力。

這是 React 功能背後的大腦,它允許編碼人員在一個元件記憶體儲資訊並執行操作,然後讓另一個元件訪問資料並使用它。這就是 React 中子元件和父元件之間的關係。

父元件或原始元件已經有要處理的操作。想要執行另一個過程來替換、更新或新增資料到父元件的編碼器建立子元件來執行此操作。

在某些情況下,開發人員可能希望將多個資料傳遞給父級。建立多個子元件也是一種理想的方法。

這將導致父元件更短更整潔,程式碼更少。

使用回撥函式將資料返回給父元件

callback 函式是一個 React 概念,它允許你在處理該函式的操作後呼叫該函式。這是將子元件中的函式呼叫回父元件的直接方法。

我們將從終端建立一個新專案開始。我們輸入 npx create-react-app illustrationone

建立專案後,我們轉到編輯器中的資料夾,移動到 src 資料夾並建立一個新檔案 Child.js。我們將在示例中使用 App.jsChild.js

我們的 App.js 將作為我們的父元件,我們將像這樣啟動 callback 函式:

程式碼片段(App.js):

import React from 'react';
import Child from './Child'
class App extends React.Component{

    state = {
        name: "",
    }

    handleCallback = (childData) =>{
        this.setState({name: childData})
    }

    render(){
        const {name} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {name}
            </div>
        )
    }
}
export default App

我們首先建立 name 狀態,然後宣告將從 Child.js 元件中獲取與 name 變數對應的資料的回撥函式。

一旦我們從子元件取回資料,我們將建立一個函式,該函式將返回分配給 Child.js 中的 name 變數的資料。

接下來,我們轉到 Child.js,在這裡,我們宣告我們想要執行的操作。

程式碼片段(Child.js):

import React from 'react'
class Child extends React.Component{

    onTrigger = (event) => {
        this.props.parentCallback(event.target.myname.value);
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "text"
                name = "myname" placeholder = "Enter Name"/>
                <br></br><br></br>
                <input type = "submit" value = "Submit"/>
                <br></br><br></br>
            </form>
        </div>
        )
    }
}
export default Child

輸出:

使用回撥函式將狀態傳遞給父級

因為我們想將此資料傳遞迴父元件,所以我們需要一個函式來啟動子元件內的 callback 函式。這就是我們需要 onTrigger 事件監聽器的地方。

一旦我們點選 Submit 按鈕並顯示結果,onTrigger 立即啟用 callback 函式,將分配給 name 變數的值傳回父元件。

使用道具將狀態傳遞迴父元件

與前面的示例相比,這是一種更直接的方法。我們使用 props 將處理後的結果返回給父元件。

我們導航到 src 資料夾並建立一個新檔案 User.js。這將是我們的子元件。

App.js 是我們的父元件,我們將傳遞這些程式碼:

程式碼片段(App.js):

import React from 'react'
import './App.css';
import User from './User'
function App() {
  function getName(name) {
    alert(name)
  }
  return (
    <div className="App">
      <h1>Returning State Back to Parent</h1>
      <User getData={getName} />
    </div>
  );
}

export default App;

我們建立了一個 name 函式,它指示 React 框架我們希望它獲取分配給 name 函式的日期。然後我們想提醒它,即我們想以彈窗的形式返回。

然後我們在子元件 User.js 中新增更多程式碼:

程式碼片段(User.js):

function User(props)
{
    const name="Oluwafisayo"
    return(
        <div>
            <h1>My Name is : </h1>
            <button onClick={()=>props.getData(name)} >Click Me</button>
        </div>
    )
}

export default User;

輸出:

使用道具將狀態傳遞給父級

這裡我們將資料分配給 name 函式,然後一旦按下 Click me 按鈕,它就會啟用 onClick 事件偵聽器,它將資料作為 props 返回給父級。請記住,props 是屬性的縮寫。

從多個子元件向父元件傳遞資料

由於我們從兩個子元件向父元件傳遞資料,我們將為父元件建立一個檔案 TodoList.js,為子元件建立兩個檔案 Todo.jsDeadlineList.js

父元件將包含程式碼,這些程式碼將定義函式以派生我們要從子元件中檢索的資料:

程式碼片段(TodoList.js):

import React from "react";
import Todo from "./Todo";
import DeadlineList from "./DeadlineList";

const TodoList = ({ todos, toggleTodo }) =>
  console.log(todos) || (
    <table>
      <tbody>
        <tr>
          <th className="taskTH">TASK</th>
          <th className="deadlineTH">DEADLINE</th>
        </tr>
        <tr>
          <td className="taskTD">
            {todos.map((todo) => (
              <Todo
                key={todo.id}
                text={todo.text}
                completed={todo.completed}
                toggleTodoItem={() => toggleTodo(todo.id)}
              />
            ))}
          </td>
          <td className="deadlineTd">
            {" "}
            {todos.map(
              (todo) =>
                console.log("TODO", todo) || (
                  <DeadlineList
                    key={todo.id}
                    value={todo.date}
                    completed={todo.completed}
                    onClick={() => toggleTodo(todo.id)}
                  />
                )
            )}
          </td>
        </tr>
      </tbody>
    </table>
  );

export default TodoList;

接下來,我們處理 Todo.js,一個表單。輸入資料後,我們單擊 Add Todo 按鈕,它會返回資料:

程式碼片段(Todo.js):

import React, { useState } from 'react';
import wooHooSound from '../utils/wooHoo.js'

const Todo = (props) => {

    const { toggleTodoItem, completed, text } = props;

    let [ shouldPlaySound, setShouldPlaySound ] = useState(true);

    function wooHooEverySecondClick() {
        if (shouldPlaySound) {
            wooHooSound.play();
            setShouldPlaySound(false);
        } else {
            setShouldPlaySound(true);
        }
    }

    return (
        <li className="bananaLi"
            onClick={() => {
                toggleTodoItem();
                wooHooEverySecondClick();
            }}
            style={{
                textDecoration: completed ? 'line-through' : 'none'
            }}
        >

            {text}

        </li>
    );
};

export default Todo;

然後 DeadlineList.js 負責將列表以列表格式的形式呈現給父級:

程式碼片段(DeadlineList.js):

import React from "react";

const DeadlineList = ({ onClick, completed, value }) => {
  return (
    <li
      className="deadlineLi"
      onClick={onClick}
      style={{
        textDecoration: completed ? "line-through" : "none"
      }}
    >
      {new Intl.DateTimeFormat("en-US").format(value)}
    </li>
  );
};

export default DeadlineList;

然後我們匯入 App.js 中的所有內容:

程式碼片段(App.js):

import React from 'react';
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList';
import Footer from './Footer';

const App = () => (

    <div className="appCSS">

        <AddTodo />
        <VisibleTodoList />
        <Footer />

    </div>

);

export default App;

輸出:

React 從多個子元件向父元件傳遞狀態

まとめ

當開發人員作為一個團隊構建專案時,為每個元件編寫連貫的短程式碼可以很容易地從隊友那裡獲得幫助。相反,一個程式碼混亂的專案會很容易讓想要幫助的同伴望而卻步。

Oluwafisayo Oluwatayo avatar Oluwafisayo Oluwatayo avatar

Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.

LinkedIn

相關文章 - React Component