React hook: как родительская функция получает доступ к состоянию дочерней функции: при нажатии кнопки родительское приложение считывает состояние дочерней функции

Question

Я борюсь с «поднятием состояния вверх», чтобы создать складной компонент.

Я создал две функции: Кнопка (дочерняя) и Приложение (родительская). Если пользователь нажимает кнопку, он должен отправить состояние [clicked] в функцию App (parent).

Я надеюсь, что функция App (parent) каким-то образом получит доступ к состоянию потомка и будет использовать его как константу внутриродительской функции.

Button.js

import React, { useState } from "react";
import "./Button.css";

function Button() {
  const [clicked, setClicked] = useState(false);
  return (
    <div className="Button" onClick={() => setClicked(!clicked)}>
      <div>Click me!</div>
    </div>
  );
}
export default Button;

App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import Button from "./components/Button";
import "./App.css";

function App() {
  /* const stateFromButton = ??? */
  return (
    <div className="App">
    /*Somehow from button component, passes its clicked state*/
      <Button />
      </div>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Answer 1

Что мы сделали: 1) Передаем setState от Parent к child в качестве опоры. 2) В дочернем событии onClick вызовите функцию через props

Это будет ваш App.js

import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import './button.js';
import Button from "./button";

function App() {

    const [clicked, setState] = useState("TEST");

    return (
        <div className="App">
            <header className="App-header">
                <Button changeVal={() => setState("GOING TO PARENT")}>CLICK ME</Button>
                <img src={logo} className="App-logo" alt="logo"/>
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
                <div>Value is {clicked}</div>
            </header>

        </div>
    );
}

export default App;

Это будет Button.js

import React, {useState} from "react";

function Button(props) {
    return (
        <div className="Button"
             onClick={()=>props.changeVal()}>
            Click Me!
        </div>
    );
}

export default Button;