Как использовать обратный вызов с хуком useState в реакции

function Parent() {
  const [Name, setName] = useState("");
  getChildChange = getChildChange.bind(this);
  function getChildChange(value) {
    setName(value);
  }

  return <div> {Name} :
    <Child getChildChange = {getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");
  handleChangeEvent = handleChangeEvent.bind(this);
  collectState = collectState.bind(this);
  
  function handleChangeEvent(ele) {
    setName(ele.target.value);
  }

  function collectState() {
    return Name;
  }
  
   useEffect(() => {
    props.getChildChange(collectState());
   });

  return (<div>
    <input onChange = {handleChangeEvent} value = {Name}></input>
  </div>);
} 

useEffect действовать как componentDidMount, componentDidUpdate, поэтому после обновления состояния он будет работать

На самом деле вам следует избегать использования this при использовании реагирующих хуков. Он вызывает побочные эффекты. Вот почему команда реагирования создает react hooks.

Если вы удалите коды, которые пытаются связать this, вы можете просто передать setName из Parent в Child и вызвать его handleChangeEvent. Более чистый код!

function Parent() {
  const [Name, setName] = useState("");

  return <div> {Name} :
    <Child setName = {setName} ></Child>
  </div>
}

function Child(props) {
  const [Name, setName] = useState("");

  function handleChangeEvent(ele) {
    setName(ele.target.value);
    props.setName(ele.target.value);
  }

  return (<div>
    <input onChange = {handleChangeEvent} value = {Name}></input>
  </div>);
} 

Более того, вам не нужно создавать две копии Name (одну в Parent, а другую в Child). Придерживайтесь принципа «Единого источника правды», Child не должен владеть государством Name, но должен получать его от Parent. Узел чище!

function Parent() {
  const [Name, setName] = useState("");

  return <div> {Name} :
    <Child setName = {setName} Name = {Name}></Child>
  </div>
}

function Child(props) {    
  function handleChangeEvent(ele) {
    props.setName(ele.target.value);
  }

  return (<div>
    <input onChange = {handleChangeEvent} value = {props.Name}></input>
  </div>);
} 

Для этого вы можете использовать useEffect/useLayoutEffect:

const SomeComponent = () => {
  const [count, setCount] = React.useState(0)

  React.useEffect(() => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  }, [count]);

  return (
    <div>
      <p>{count}</p>

      <button type = "button" onClick = {() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

Подробнее об этом в здесь.

Если вы ищете готовое решение, обратите внимание на этот пользовательский крючок, который работает как useState, но принимает в качестве второго параметра функцию обратного вызова:

// npm install use-state-with-callback

import useStateWithCallback from 'use-state-with-callback';

const SomeOtherComponent = () => {
  const [count, setCount] = useStateWithCallback(0, count => {
    if (count > 1) {
      document.title = 'Threshold of over 1 reached.';
    } else {
      document.title = 'No threshold reached.';
    }
  });

  return (
    <div>
      <p>{count}</p>

      <button type = "button" onClick = {() => setCount(count + 1)}>
        Increase
      </button>
    </div>
  );
};

В React16.x и более поздних версиях, если вы хотите вызвать функцию обратного вызова при изменении состояния с помощью хука useState, вы можете использовать хук useEffect, прикрепленный к изменению состояния.

import React, { useEffect } from "react";

useEffect(() => {
  props.getChildChange(name); // using camelCase for variable name is recommended.
}, [name]); // this will call getChildChange when ever name changes.

мы можем написать функцию настройки, которая будет вызывать функцию callBack, если какие-либо изменения в состоянии

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const useStateCallbackWrapper = (initilValue, callBack) => {
  const [state, setState] = useState(initilValue);
  useEffect(() => callBack(state), [state]);
  return [state, setState];
};

const callBack = state => {
  console.info("---------------", state);
};
function App() {
  const [count, setCount] = useStateCallbackWrapper(0, callBack);
  return (
    <div className = "App">
      <h1>{count}</h1>
      <button onClick = {() => setCount(count + 1)}>+</button>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

`

Другой способ добиться этого:

const [Name, setName] = useState({val:"", callback: null});
React.useEffect(()=>{
  console.info(Name)
  const {callback} = Name;
  callback && callback();
}, [Name]);
setName({val:'foo', callback: ()=>setName({val: 'then bar'})})

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

function Parent() {
  const [name, setName] = useState("");
  const getChildChange = useCallback( (updatedName) => {
    setName(updatedName);
  }, []);

  return <div> {name} :
    <Child getChildChange = {getChildChange} ></Child>
  </div>
}

function Child(props) {
  const [name, setName] = useState("");

  function handleChangeEvent(ele) {
    setName(ele.target.value);
    props.getChildChange(ele.target.value);
  }

  function collectState() {
    return name;
  }

  return (<div>
    <input onChange = {handleChangeEvent} value = {name}></input>
  </div>);
}

setState(updater, callback) за useState

Следующая реализация очень близка к исходному обратному вызову классов setState.

Улучшения, внесенные в принятый ответ:

1. Выполнение обратного вызова опущено при начальном рендеринге — мы хотим вызывать его только в состоянии обновления.
2. Обратный вызов может быть динамическим для каждого вызова setState, как с классами.

Применение

const App = () => {
  const [state, setState] = useStateCallback(0); // same API as useState

  const handleClick = () => {
    setState(
      prev => prev + 1,
      // second argument is callback, `s` being the *updated* state
      s => console.info("I am called after setState, state:", s)
    );
  };

  return <button onClick = {handleClick}>Increment</button>;
}

useStateCallback

function useStateCallback(initialState) {
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null); // init mutable ref container for callbacks

  const setStateCallback = useCallback((state, cb) => {
    cbRef.current = cb; // store current, passed callback in ref
    setState(state);
  }, []); // keep object reference stable, exactly like `useState`

  useEffect(() => {
    // cb.current is `null` on initial render, 
    // so we only invoke callback on state *updates*
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null; // reset callback after execution
    }
  }, [state]);

  return [state, setStateCallback];
}

Дополнительная информация: React Hooks FAQ: есть ли что-то вроде переменных экземпляра?

Рабочий пример

const App = () => {
  const [state, setState] = useStateCallback(0);

  const handleClick = () =>
    setState(
      prev => prev + 1,
      // important: use `s`, not the stale/old closure value `state`
      s => console.info("I am called after setState, state:", s)
    );

  return (
    <div>
      <p>Hello Comp. State: {state} </p>
      <button onClick = {handleClick}>Click me</button>
    </div>
  );
}

function useStateCallback(initialState) {
  const [state, setState] = useState(initialState);
  const cbRef = useRef(null);

  const setStateCallback = useCallback((state, cb) => {
    cbRef.current = cb; 
    setState(state);
  }, []);

  useEffect(() => {
    if (cbRef.current) {
      cbRef.current(state);
      cbRef.current = null;
    }
  }, [state]);

  return [state, setStateCallback];
}

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

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity = "sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4 = " crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity = "sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w = " crossorigin = "anonymous"></script>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>
<div id = "root"></div>