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

Я создал репозиторий на GitHub, поэтому не стесняйтесь загружать это упражнение и использовать технику, которую я показываю в этом небольшом руководстве.

По сути, я написал два компонента. Один из них - ParentComponent, а другой - ChildComponent . Основная цель - легко передать состояние от дочернего компонента родительскому компоненту.

В эту статью я встроил код обоих компонентов. Я выделил жирным те части, которые делают возможной передачу состояния от Child к Parent.

Давайте начнем!

Родительский компонент выглядит так:

import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
  state = {
    dataParent: ''
  }
  render () {
    const showDataParent = () => {
      if (this.state.dataParent !== '') {
        return <p className="message">{this.state.dataParent}</p>;
      } else {
       return <p className="message">There's no data yet</p>;
      }
    }
    const dataFromChild = (data) => {
      this.setState({dataParent: data})
    }
    return (
       <div>
           <ChildComponent getDataFromChild={(stateFromChild) =>            dataFromChild(stateFromChild)}  />
         {showDataParent()}
    </div>
    );
  }
}
export default ParentComponent;

Это базовый компонент с собственными данными о состоянии. Мы будем использовать это состояние для хранения состояния компонента Child и отображения его на экране.

‹ChildComponent /› имеет свойство getDataFromChild , которое состоит из функции обратного вызова. Внутри этого мы вызываем другую функцию, которая определена в родительском компоненте, с целью создания родительского состояния с новым аргументом - состоянием дочернего компонента. После обновления состояния родительского компонента мы отобразим сообщение на экране с помощью функции showDataParent ().

Детский компонент выглядит так:

import React, { Component } from 'react';
class ChildComponent extends Component {
  state = {
    dataChildInput: ''
  }
  render () {
    return (
      <div className="ChildComponent">
        <label>Data Child Input</label>
        <input type="text" onChange={(event) => this.setState({dataChildInput: event.target.value})} />
        <button onClick={() => this.props.getDataFromChild(this.state.dataChildInput)}>
       
       Pass State from Child to Parent
       </button>
      </div>
    );
  }
}
export default ChildComponent;

Этот компонент состоит из метки, ввода и кнопки (которая будет использоваться для передачи состояния от дочернего элемента к родительскому).

Также есть состояние внутри дочернего компонента. Это состояние будет обновляться каждый раз, когда мы вводим новое значение в элемент ввода Дочернего. Волшебство происходит внутри свойства onClick элемента кнопки Child. Он состоит из другой функции обратного вызова, которая будет использовать функцию getDataFromChild, которую мы определили для родительского компонента. При вызове этой функции мы передаем состояние дочернего компонента, а затем используем его в родительском компоненте.

Подводя итоги пути данных:

  1. данные определяются в состоянии дочернего элемента. Мы сохранили его там, набрав элемент ввода Child.
<input type="text" onChange={(event) => this.setState({dataChildInput: event.target.value})} />

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

<button onClick={() => this.props.getDataFromChild(this.state.dataChildInput)}>Pass State from Child to Parent</button>

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

<ChildComponent getDataFromChild={(stateFromChild) => dataFromChild(stateFromChild)}/>

4. Мы вызываем родительскую функцию dataFromChild внутри функции обратного вызова на шаге 3 и передаем аргумент stateFromChild (который хранит наши данные). Затем наши данные определяются в состоянии родителя и готовы к использованию!

const dataFromChild = (data) => {
   this.setState({dataParent: data})
}

Я создал репозиторий на GitHub, поэтому не стесняйтесь загружать это упражнение и использовать технику, которую я показываю в этом небольшом руководстве.

Спасибо за прочтение!

(Кстати, это моя первая статья)