Как отправить данные из дочернего компонента в родительский компонент в React

Прошло некоторое время с тех пор, как я написал статью и пропустил ее, если честно. Эта статья будет о том, как передавать данные от дочерних компонентов обратно к родительским компонентам.

Итак, в первую очередь нам нужно создать проект React, перейти в подходящее место на рабочем столе и создать папку с именем «reactchildtoparent».

Теперь откройте свой любимый редактор кода и с помощью его терминала перейдите к папке, которую вы только что создали ранее. Находясь внутри этой папки, введите следующую команду.

npx create-react-app reactchildtoparent

Через несколько минут ваш реактивный проект должен быть создан, теперь откройте его в редакторе кода. Лично я использую код Visual Studio.

Внутри папки «src» создайте еще одну папку с именем «components», а внутри этой папки создайте два файла «.js», один из которых называется «Parent.js», а другой — «Child.js».

В этой статье я буду использовать файл «App.js» в качестве начального компонента, который я увижу.

Поскольку React следует только одностороннему шаблону привязки данных, официального способа отправки данных от дочернего компонента к родительскому компоненту нет, но вы всегда можете отправлять переменные и функции от родителя к дочернему, однако есть обходной путь для обратного (от ребенка к родителю). Это включает в себя отправку функции из родительского компонента в дочерний компонент в качестве реквизита, который содержит один параметр, который будет содержать значение из дочернего компонента.

Хватит болтать!

Внутри вашего компонента «Parent.js» напишите следующее.

import React, { useState } from "react";

function Parent() {

    const [text, setText] = useState("Default text");

    const changeText = (myText) => {
        setText(myText);
    }
    return (
        <div>
            <div style={{border:'1px solid red'}}>
                <h5>This is the parent component</h5>
            <h5>{text}</h5>
            </div>
            

        </div>
    )

}

export default Parent;

Итак, у нас есть функциональный компонент с состоянием «текст» и функция «setText» для обновления состояния «текст». У нас также есть функция с именем «changeText», которая имеет один параметр, и этот параметр затем будет передан в функцию «setText» для обновления текста.

Функция «changeText» будет передана дочернему компоненту (о чем я сейчас расскажу подробнее)

В файле «Child.js» введите следующее.

import React from "react";

function Child({chosenText}) {
    let updatedText = "text has been changed from child component";
    return (
        <div style={{marginTop:'30px',border:'1px solid green'}}>
            <h5>This is the child component</h5>
            <button onClick={()=>chosenText(updatedText)}>Click here to update the message</button>
        </div>
    )

}

export default Child;

Итак, у нас есть функция с именем «Child», которая содержит один параметр (который мы деструктурируем, поэтому нам не нужно использовать «props.changeText». Я также установил переменную с именем «updatedText», которая, как вы можете видеть в коде выше передается в параметр функции, которую мы передали компоненту.

Таким образом, мы передаем функцию из родительского компонента, которая обновляет родительское состояние, более того, когда в дочернем компоненте мы устанавливаем параметр переданной функции равным переменной «updatedText». Поэтому мы обновляем состояние переменной в дочернем компоненте. Это делается в событии onClick кнопки.

Итак, теперь мы можем вернуться к родительскому компоненту и добавить «дочерний» компонент.

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

function Parent() {

    const [text, setText] = useState("Default text");

    const changeText = (myText) => {
        setText(myText);
    }
    return (
        <div>
            <div style={{border:'1px solid red'}}>
                <h5>This is the parent component</h5>
            <h5>{text}</h5>
            </div>
            <Child chosenText={changeText} />
            

        </div>
    )

}

export default Parent;

Итак, теперь наш родительский компонент выглядит так, как показано выше, где мы отображаем наше сообщение, а также есть реализация дочернего компонента, который передается в функцию «changeText».

Теперь последнее, что нам нужно сделать, это удалить шаблонный код из нашего «App.js» и реализовать компонент «Родительский», чтобы наш файл «App.js» выглядел так.

import logo from './logo.svg';
import './App.css';
import Parent from './components/Parent';

function App() {
  return (
    <div className="App">
      <Parent/>
    </div>
  );
}

export default App;

Выше показано, как выглядит наш экран по умолчанию. Если мы нажмем кнопку, вы увидите изменение «Текст по умолчанию».

Общий пример использования

Обычным вариантом использования для всего этого сценария является счетчик или какой-либо флажок, который находится в дочернем компоненте и в зависимости от того, установлен флажок или нет, определяет текстовое значение в его родительском компоненте.

Кроме того, у вас может быть форма в дочернем компоненте и вы хотите отобразить значения из формы или проверки значений в родительском компоненте, и вы можете использовать функцию, переданную в дочерний компонент, чтобы затем содержать значения входных элементов (event. target.value) в качестве аргумента функции, поэтому при отправке формы эти значения передаются родительскому компоненту.

Спасибо, что прочитали эту статью.

Пожалуйста, смотрите мой блог здесь — https://simplyreact.uk/