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

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

В React данные обычно движутся сверху вниз — от родителя к дочерним компонентам через props. Однако часто возникает необходимость передать информацию обратно, например, когда пользователь вводит текст в поле внутри дочернего компонента, и родитель должен узнать это значение. Для этого используется механизм колбэков.

Как это работает

Родительский компонент определяет функцию-обработчик и передает её дочернему компоненту как prop. Дочерний компонент вызывает эту функцию, передавая в неё данные (например, значение из input). Родитель получает эти данные в своей функции и может обновить своё состояние или выполнить другие действия.

Пример кода

// Родительский компонент
function Parent() {
  const [childData, setChildData] = useState('');

  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <h1>Данные от ребенка: {childData}</h1>
      <Child onSendData={handleDataFromChild} />
    </div>
  );
}

// Дочерний компонент
function Child({ onSendData }) {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    onSendData(inputValue); // Передаём данные родителю
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleClick}>Отправить родителю</button>
    </div>
  );
}

Где это применяется

• Формы: когда нужно собрать данные из нескольких полей ввода и передать их наверх.
• Списки: при клике на элемент списка нужно сообщить родителю, какой элемент выбран.
• Модальные окна: при закрытии модального окна передать результат (например, подтверждение).

Вывод

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