React Hook: отправка данных от дочернего компонента к родительскому

Обычный метод для таких ситуаций — поднять состояние вверх к первому общему предку всех компонентов, которым необходимо использовать состояние (то есть PageComponent в данном случае), и передать состояние и функции, изменяющие состояние, дочерним компонентам в качестве реквизита.

Пример

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className = "App">
      <ChildComponent onClick = {increment} count = {count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick = {onClick}>
       Click me {count}
    </button>
  )
};

ReactDOM.render(<PageComponent />, document.getElementById("root"));

<script src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id = "root"></div>

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

    const EnhancedTable = ({ parentCallback }) => {
        const [count, setCount] = useState(0);
        
        return (
            <button onClick = {() => {
                const newValue = count + 1;
                setCount(newValue);
                parentCallback(newValue);
            }}>
                 Click me {count}
            </button>
        )
    };

    class PageComponent extends React.Component { 
        callback = (count) => {
            // do something with value in parent component, like save to state
        }

        render() {
            return (
                <div className = "App">
                    <EnhancedTable parentCallback = {this.callback} />         
                    <h2>count 0</h2>
                    (count should be updated from child)
                </div>
            )
        }
    }

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

пример: Предположим, что есть 4 компонента, как показано ниже,

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

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName = {setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick = {() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName = {params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick = {() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

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

вы можете найти рабочий код в песочнице ниже, https://codesandbox.io/embed/async-fire-kl197

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

import React, { useState } from "react";

let myState = {};

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  myState.name=name;
  myState.setName=setName;
  return (
    <>
      <div>{name}</div>
      <Parent />
    </>
  );
};
export default GrandParent;

const Parent = () => {
  return (
    <>
      <button onClick = {() => myState.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child />
    </>
  );
};

const Child = () => {
  return (
    <>
      <button onClick = {() => myState.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

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