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

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

Давайте посмотрим на пример:

Родительский компонент (Parent):

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

const Parent = () => {
  const [data, setData] = useState('');

  const handleData = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <h1>Data from Child: {data}</h1>
      <Child sendData={handleData} />
    </div>
  );
};

export default Parent;

Дочерний компонент (Child):

import React, { useState } from 'react';

const Child = ({ sendData }) => {
  const [inputData, setInputData] = useState('');

  const handleChange = (e) => {
    setInputData(e.target.value);
  };

  const handleClick = () => {
    sendData(inputData);
  };

  return (
    <div>
      <input type="text" value={inputData} onChange={handleChange} />
      <button onClick={handleClick}>Send Data</button>
    </div>
  );
};

export default Child;

В родительском компоненте мы используем хук useState для хранения данных, передаваемых из дочернего компонента. Мы создаем функцию handleData, которая устанавливает новое значение данных, и передаем эту функцию в качестве пропса sendData компоненту Child.

В дочернем компоненте мы снова используем хук useState для хранения данных, введенных пользователем в поле ввода. При каждом изменении значения в поле ввода, мы вызываем функцию handleChange, которая устанавливает новое значение в состояние inputData. При клике на кнопку, мы вызываем функцию sendData, передавая ей значение inputData.

Таким образом, при клике на кнопку в дочернем компоненте мы передаем данные из inputData в родительский компонент, который отображает эти данные в заголовке.